Sukurkite iššokantįjį langą naudodami HTML, CSS ir JavaScript

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Dėl gerai suprojektuotų iššokančių langų jūsų svetainė tampa interaktyvesnė ir modernesnė. Jie gali sukurti rinkas ir padidinti pardavimą įmonėms.

Galite kurti iššokančius langus naudodami HTML, CSS ir JavaScript. Naudokite šį vadovą, kad sukurtumėte ir sukurtumėte iššokantįjį langą nuo nulio. Tai daro jūsų svetainę interaktyvią ir sukuria puikią vartotojo patirtį.

DIENOS VAIZDO ĮRAŠO PAGALBA SLĖKITE, KAD TĘSITE SU TURINIU

Parašykite HTML, kad susistemintumėte turinį

Parašykime HTML kodą su paslėptu modaliniu langu, kuris pasirodo spustelėjus mygtuką. Tokiu atveju parodysite žodžio reikšmę Sveiki! Iššokančiajame lange bus antraštė ir tam tikras turinys.

Iš karto suaktyvinus modalinį langą, fone atsiranda neryškus efektas. Pridėkite klases prie skilčių, kurias naudosite norėdami pasirinkti modalą vėliau „JavaScript“.

 <body> 
    <button class="open-modal">Hello!</button> 
 
    <div class="modal-content hidden-modal"> 
        <div class="modal-header"> 
            <h3>Meaning of Hello!</h3> 
            <button class="close-modal">&times;</button> 
        </div> 
 
        <div class="modal-body"> 
            <p>Hello is a greeting in the English language. It is used at 
            the start of a sentence as an introduction whether in person or 
           on the phone.</p> 
        </div> 
    </div>  
 
    <div class="blur-bg hidden-blur"></div> 
    <script src="script.js"></script> 
</body>

Puslapis turėtų atrodyti taip:

kaip pagreitinti internetą telefone

Taip pat galite norėti ištirti HTML dialogo elementas jei norite naudoti semantiškiausią žymėjimą. ,

Parašykite CSS, kad pridėtumėte stilių

Norėdami suformatuoti iššokantįjį langą, naudokite CSS. Padėkite langą tinklalapio centre juodame fone, kad jis būtų aiškiai matomas. Taip pat nustatysite lango stilių, jo foną ir šrifto dydį.

Pirmiausia sukurkite vienodą viso puslapio stilių, nustatydami paraštę, užpildymą ir linijos aukštį. Tada sulygiuokite kūno elementus centre ant nugaros fono.

 * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    line-height: 1; 
} 
 
body { 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    background: #000; 
    gap: 30px; 
}

Tada sukurkite stilių atviras modalas mygtuką. Suteikite jam kitokią fono spalvą nei likusi puslapio dalis, kad jis išsiskirtų. Taip pat nustatykite šrifto spalvą, dydį, užpildymą ir perėjimo laiką.

Nemokamas muzikos atsisiuntimas ir grotuvas neprisijungus

 .open-modal { 
    background: #20c997; 
    color: #fff; 
    border: none; 
    padding: 20px 40px; 
    font-size: 48px; 
    border-radius: 100px; 
    cursor: pointer; 
    transition: all 0.3s; 
    outline: none; 
} 
 
.open-modal:active { 
    transform: translateY(-17px); 
}

Tada nustatykite modalinio turinio stilių, kuris bus rodomas atidarius langą. Nustatykite baltą foną, suteikite jam mažesnį plotį nei korpusas ir pridėkite paminkštinimus.

Taip pat pateikite z indeksą, kad jis būtų rodomas priešais atviras modalas mygtuką. Be to, nustatykite paslėptas-modalinis rodomas kaip nėra, todėl jis lieka paslėptas, kol jį suaktyvinsite.

 .modal-content { 
    background: #ccc; 
    width: 500px; 
    padding: 20px; 
    border-radius: 10px; 
    z-index: 99; 
} 
 
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    color: #000; 
    font-size: 30px; 
} 
 
.modal-body p {  
   font-size: 22px; 
    line-height: 1.5;  
}  
 
.hidden-modal {  
   display: none;  
}

Tada stilizuokite artimas modalinis mygtuką su skaidriu fonu ir sulygiuokite jį centre.

 .close-modal { 
    background: transparent; 
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 20px; 
    width: 20px; 
    font-size: 40px; 
} 
 
.close-modal:hover { 
    color: #fa5252; 
}

Galiausiai nustatykite suliejimo elemento stilių, kuris atsidarys fone. Jis turės maksimalų aukštį ir plotį bei fono filtrą. Nustatykite suliejimą kaip jokio, kad jis nebūtų matomas, kol neatsidarys langas.

   
.blur-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(5px); 
} 
 
.hidden-blur { 
    display: none; 
}

Įdėjus CSS, puslapis turėtų atrodyti taip:

Naudosite „JavaScript“, kad atidarytumėte ir uždarytumėte modalinį langą rodydami arba paslėpdami jį. Papildyti renginio klausytojai mygtuką, kad jis atsidarytų ir užsidarytų spustelėjus.

Pirmiausia pasirinkite atitinkamus elementus naudodami CSS klases, kurias apibrėžėte HTML:

naršo tamsiajame internete neteisėtai

 let modalContent = document.querySelector(".modal-content"); 
let openModal = document.querySelector(".open-modal"); 
let closeModal = document.querySelector(".close-modal"); 
let blurBg = document.querySelector(".blur-bg");

Pridėkite įvykių klausytoją prie atviras modalas mygtuką, kad jį spustelėjus atsidarytų langas.

 openModal.addEventListener("click", function () { 
    modalContent.classList.remove("hidden-modal"); 
    blurBg.classList.remove("hidden-blur"); 
});

Atlikite priešingus veiksmus, kad uždarytumėte iššokantįjį langą, tačiau šį kartą sudėkite juos į pavadintą funkciją. Tai apdoros kelių įvykių, dėl kurių modalinis langas gali užsidaryti, elgseną:

 let closeModalFunction = function () { 
    modalContent.classList.add("hidden-modal") 
    blurBg.classList.add("hidden-blur") 
}

Pridėkite įvykių klausytojus, kad galėtumėte spustelėti foną arba uždaryti mygtuką ir atvejį, kai vartotojas paspaudžia klavišą Escape.

 blurBg.addEventListener("click", closeModalFunction); 
closeModal.addEventListener("click", closeModalFunction); 
 
document.addEventListener("keydown", function (event) { 
    if (event.key === "Escape" 
     && !modalContent.classList.contains("hidden") 
   ) { 
        closeModalFunction(); 
    } 
});

Dabar, kai spustelėsite Sveiki! mygtuką, pasirodo modalas. Jį galite uždaryti spustelėję lango dešinėje esantį atšaukimo mygtuką. Žiūrėkite kodą codepen.io ir sąveikauti su modalu:

Pagrindinis iššokančiųjų / modalinių langų naudojimas kuriant žiniatinklio svetainę yra sutelkti dėmesį į tam tikrą svetainės elementą. Suaktyvinus, ji išjungia likusią puslapio dalį ir ragina vartotoją atkreipti į tai dėmesį.

Iššokantieji langai animuoja jūsų vartotojo sąsają. Jie gali įspėti ir atkreipti jūsų vartotojų dėmesį į svarbią informaciją tinklalapyje. Norėdami pašalinti langą, vartotojas turi atlikti tam tikrą veiksmą. Tokiu būdu vartotojas gali bendrauti su langu ir gauti reikiamą informaciją.

Parašykite HTML, kad susistemintumėte turinį

Parašykite CSS, kad pridėtumėte stilių

Valdykite iššokantįjį langą naudodami „JavaScript“ kodą

Iššokančiųjų langų naudojimas