Home-theater-designers
Ginagawang mas interactive at moderno ang iyong website na may mahusay na disenyong mga popup window. Maaari silang lumikha ng mga merkado at palakasin ang mga benta para sa mga negosyo.
Maaari kang lumikha ng mga popup window na may HTML, CSS, at JavaScript. Gamitin ang sumusunod na gabay upang gumawa at mag-istilo ng popup window mula sa simula. Ginagawa nitong interactive ang iyong website at lumilikha ng magagandang karanasan ng user.
MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
Sumulat ng HTML upang Istraktura ang Nilalaman
Sumulat tayo ng ilang HTML code na may nakatagong modal window na lalabas kapag nag-click ka sa isang button. Sa kasong ito, ipapakita mo ang kahulugan ng salita Kamusta! Ang popup window ay magkakaroon ng heading at ilang nilalaman.
Kaagad mong i-trigger ang modal window, may malabong epekto sa background. Magdagdag ng mga klase sa mga seksyong gagamitin mo upang piliin ang modal sa ibang pagkakataon sa 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">×</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>
Ang pahina ay dapat na lumitaw tulad nito:
Maaari mo ring nais na siyasatin ang Elemento ng dialog ng HTML kung gusto mong gamitin ang pinakasemantic markup. ang
kung paano basahin ang mac hard drive sa windows
Sumulat ng CSS upang Magdagdag ng Estilo
Gamitin ang CSS upang i-format ang popup window. Ilagay ang window sa gitna ng webpage laban sa isang itim na background, upang ito ay malinaw na nakikita. I-istilo mo rin ang window, background nito, at laki ng font.
Una, gumawa ng pare-parehong istilo para sa buong page sa pamamagitan ng pagtatakda ng margin, padding, at line-height. Pagkatapos ay ihanay ang mga elemento ng katawan sa gitna sa likod na background.
* {
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;
}
Susunod, i-istilo ang bukas-modal pindutan. Bigyan ito ng ibang kulay ng background mula sa natitirang bahagi ng pahina upang ito ay kapansin-pansin. Gayundin, itakda ang kulay ng font, laki, padding, at oras ng paglipat nito.
.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);
}
Pagkatapos, i-istilo ang modal na nilalaman na ipapakita kapag nagbukas ang window. Magtakda ng puting background, bigyan ito ng mas maliit na lapad kaysa sa katawan, at magdagdag ng padding.
Bigyan din ito ng z-index, kaya lilitaw ito sa harap ng bukas-modal pindutan. Bukod pa rito, itakda ang hidden-modal ipakita bilang wala, kaya nananatili itong nakatago hanggang sa ma-trigger mo ito.
.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;
}
Pagkatapos ay i-istilo ang malapit na modal button na may transparent na background at ihanay ito sa gitna.
Maaari ba akong gumamit ng mga headphone ng bluetooth na may xbox one?
.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;
}
Panghuli, i-istilo ang elemento ng blur na ipapalabas sa background kapag bumukas ang window. Magkakaroon ito ng pinakamataas na taas at lapad at isang filter sa background. Itakda ang blur bilang wala, kaya hindi ito makikita hanggang sa bumukas ang window.
.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;
}
Pagkatapos magdagdag sa CSS, ang pahina ay dapat magmukhang ganito:
Kontrolin ang Popup Gamit ang JavaScript Code
Gagamitin mo ang JavaScript upang buksan at isara ang modal window sa pamamagitan ng pagpapakita o pagtatago nito. Idagdag mga tagapakinig ng kaganapan sa button para ma-trigger itong magbukas at magsara kapag na-click mo ito.
Piliin muna ang mga nauugnay na elemento gamit ang mga klase ng CSS na tinukoy mo sa HTML:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
Magdagdag ng tagapakinig ng kaganapan sa bukas-modal button upang mabuksan nito ang window kapag na-click mo ito.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
Magsagawa ng mga kabaligtaran na pagkilos upang mahawakan ang pagsasara ng popup ngunit, sa pagkakataong ito, balutin ang mga ito sa isang pinangalanang function. Hahawakan nito ang pag-uugali para sa maraming kaganapan na maaaring maging sanhi ng pagsasara ng modal window:
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
Magdagdag ng mga tagapakinig ng kaganapan upang mahawakan ang mga pag-click sa background o isara na button, at ang kaso kung saan pinindot ng user ang Escape key.
bakit ang mahal ng gpus ngayon
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
Ngayon, kapag nag-click ka sa Kamusta! button, lilitaw ang modal. Maaari mo itong isara sa pamamagitan ng pag-click sa button na kanselahin sa kanan ng window. Tingnan ang code sa codepen.io at makipag-ugnayan sa modal:
Mga Paggamit ng Popup Windows
Ang pangunahing paggamit ng mga popup/modal window sa web development ay upang magdala ng focus sa isang partikular na item sa website. Kapag na-trigger, idi-deactivate nito ang natitirang bahagi ng page na nag-uudyok sa isang user na bigyang pansin ito.
Ang mga popup window ay nagbibigay-buhay sa iyong UI. Maaari silang alertuhan at maakit ang pansin sa mahalagang impormasyon sa webpage para sa iyong mga user. Upang alisin ang window, ang user ay kailangang magsagawa ng ilang uri ng pagkilos. Sa ganitong paraan ang user ay makakakuha ng pakikipag-ugnayan sa window at makuha ang nilalayong impormasyon.