Açılır pencereler çevrimiçi olarak her yerde bulunur, ancak hepsi kötü değildir. Standart web teknolojileriyle uslu bir açılır pencereyi nasıl oluşturacağınızı öğrenin.

İyi tasarlanmış açılır pencereler, web sitenizi daha etkileşimli ve modern hale getirir. Pazarlar yaratabilir ve işletmeler için satışları artırabilirler.

HTML, CSS ve JavaScript ile açılır pencereler oluşturabilirsiniz. Sıfırdan bir açılır pencere oluşturmak ve biçimlendirmek için aşağıdaki kılavuzu kullanın. Web sitenizi etkileşimli hale getirir ve harika kullanıcı deneyimleri oluşturur.

İçeriği Yapılandırmak için HTML Yazın

Bir düğmeyi tıklattığınızda açılan gizli bir kalıcı penceresi olan bazı HTML kodları yazalım. Bu durumda, kelimenin anlamını göstereceksiniz. Merhaba! Açılır pencerede bir başlık ve bazı içerikler olacaktır.

Kalıcı pencereyi tetiklediğiniz anda, arka planda bulanık bir efekt oluşur. Daha sonra JavaScript'te modu seçmek için kullanacağınız bölümlere sınıflar ekleyin.

<vücut>
<düğmesınıf="açık modlu">Merhaba!





instagram viewer


düğme>
<divsınıf="modal-içerik gizli-modal">
<divsınıf="modal başlık">
<h3>Merhaba anlamı!h3>
<düğmesınıf="yakın modal">×düğme>
div>


<divsınıf="modal gövde">
<P>Merhaba, İngilizce dilinde bir selamlamadır. Şurada kullanılır:
 Bir cümlenin başlangıcı, bizzat veya kişisel olarak bir giriş olarak
 telefonda.P>
div>
div>
<divsınıf="blur-bg gizli-blur">div>
<senaryokaynak="script.js">senaryo>
vücut>

Sayfa şöyle görünmelidir:

Ayrıca araştırmak isteyebilirsiniz HTML iletişim öğesi en anlamsal işaretlemeyi kullanmak istiyorsanız.

Stil Eklemek için CSS Yazma

Açılır pencereyi biçimlendirmek için CSS kullanın. Pencereyi web sayfasının ortasına siyah bir arka plana yerleştirin, böylece net bir şekilde görünür. Ayrıca pencerenin stilini, arka planını ve yazı tipi boyutunu belirleyeceksiniz.

İlk olarak, kenar boşluğunu, dolguyu ve satır yüksekliğini ayarlayarak tüm sayfa için tek biçimli bir stil oluşturun. Ardından, gövde öğelerini arka plan üzerinde merkezde hizalayın.

* {
marj: 0;
dolgu malzemesi: 0;
kutu boyutlandırma: sınır kutusu;
satır yüksekliği: 1;
}
vücut {
yükseklik: 100%;
görüntülemek: esnek;
haklı içerik: merkez;
esnek yön: kolon;
hizalama öğeleri: merkez;
arka plan: #000;
açıklık: 30piksel;
}

Ardından, stil açık modlu düğme. Öne çıkması için sayfanın geri kalanından farklı bir arka plan rengi verin. Ayrıca yazı tipi rengini, boyutunu, dolgusunu ve geçiş süresini ayarlayın.

.open-modal {
arka plan: #20c997;
renk: #ffff;
sınır: hiçbiri;
dolgu malzemesi: 20piksel 40piksel;
yazı Boyutu: 48piksel;
sınır yarıçapı: 100piksel;
imleç: Işaretçi;
geçiş: Tümü 0.3 saniye;
anahat: hiçbiri;
}
.open-modal:aktif {
dönüştürmek: çevirY(-17 piksel);
}

Ardından, pencere açıldığında görüntülenecek kalıcı içeriğin stilini belirleyin. Beyaz bir arka plan ayarlayın, gövdeden daha küçük bir genişlik verin ve dolgu ekleyin.

Ayrıca bir z-endeksi verin, böylece ekranın önünde görünür. açık modlu düğme. Ek olarak, gizli kipli yok olarak görüntülendiğinden, siz tetikleyene kadar gizli kalır.

.modal içerik {
arka plan: #ccc;
Genişlik: 500piksel;
dolgu malzemesi: 20piksel;
sınır yarıçapı: 10piksel;
z-endeksi: 99;
}
.modal başlık {
görüntülemek: esnek;
haklı içerik: arasındaki boşluk;
kenar boşluğu: 16piksel;
renk: #000;
yazı Boyutu: 30piksel;
}


.modal-bodyP { 
yazı Boyutu: 22piksel;
satır yüksekliği: 1.5; 
} 
.hidden-modal { 
görüntülemek: hiçbiri; 
}

Ardından stil yakın kipli Saydam bir arka plana sahip düğmeyi seçin ve merkeze hizalayın.

.close-modal {
arka plan: şeffaf;
sınır: hiçbiri;
görüntülemek: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
yükseklik: 20piksel;
Genişlik: 20piksel;
yazı Boyutu: 40piksel;
}
.close-modal:vurgulu {
renk: #fa5252;
}

Son olarak, pencere açıldığında arka planda görünecek olan bulanıklaştırma öğesinin stilini belirleyin. Maksimum yükseklik ve genişliğe ve bir arka plan filtresine sahip olacaktır. Bulanıklığı yok olarak ayarlayın, böylece pencere açılana kadar görünmez.


.blur-bg {
konum: mutlak;
tepe: 0;
sol: 0;
yükseklik: 100%;
Genişlik: 100%;
arka plan: rgba(0, 0, 0, 0.3);
zemin filtresi: bulanıklık(5piksel);
}
.gizli bulanıklık {
görüntülemek: hiçbiri;
}

CSS'yi ekledikten sonra sayfa şöyle görünmelidir:

Açılır Pencereyi JavaScript Koduyla Kontrol Edin

Kalıcı pencereyi göstererek veya gizleyerek açmak ve kapatmak için JavaScript kullanacaksınız. Eklemek olay dinleyicileri tıklattığınızda açılıp kapanmasını tetiklemek için düğmeye basın.

Önce HTML'de tanımladığınız CSS sınıflarını kullanarak ilgili öğeleri seçin:

izin vermek modalİçerik = belge.querySelector(".modal içerik");
izin vermek açıkKip = belge.querySelector(".open-modal");
izin vermek KapatModal = belge.querySelector(".close-modal");
izin vermek bulanıklıkBg = belge.querySelector(".blur-bg");

Şuna bir olay dinleyicisi ekleyin: açık modlu düğmesini tıklattığınızda pencerenin açılmasını sağlar.

openModal.addEventListener("tıklamak", işlev () {
 modalContent.classList.remove("gizli mod");
 blurBg.classList.remove("gizli bulanıklık");
});

Açılır pencereyi kapatmak için zıt eylemleri gerçekleştirin, ancak bu sefer bunları adlandırılmış bir işleve sarın. Bu, kalıcı pencerenin kapanmasına neden olabilecek birden çok olayın davranışını ele alacaktır:

izin vermek closeModalFunction = işlev () {
 modalContent.classList.add("gizli mod")
 blurBg.classList.add("gizli bulanıklık")
}

Arka plandaki veya kapat düğmesine yapılan tıklamaları ve kullanıcının Escape tuşuna bastığı durumu işlemek için olay dinleyicileri ekleyin.

blurBg.addEventListener("tıklamak", modalFonksiyonu kapat);
closeModal.addEventListener("tıklamak", modalFonksiyonu kapat);
belge.addEventListener("tuş aşağı", işlev (etkinlik) {
eğer (olay.anahtar "Kaçmak"
 && !modalContent.classList.contains("gizlenmiş")
 ) {
 closeModalFunction();
 }
});

Şimdi, üzerine tıkladığınızda Merhaba! düğmesine basın, modal görünür. Pencerenin sağ tarafında bulunan iptal düğmesine tıklayarak kapatabilirsiniz. üzerindeki koda bakın codepen.io ve modal ile etkileşime geçin:

Açılır Pencerelerin Kullanım Alanları

Web geliştirmede açılır pencerelerin/modal pencerelerin ana kullanımı, web sitesindeki belirli bir öğeye odaklanmaktır. Bir kez tetiklendiğinde, kullanıcının dikkatini ona vermesini isteyen sayfanın geri kalanını devre dışı bırakır.

Açılır pencereler kullanıcı arayüzünüzü canlandırır. Kullanıcılarınız için web sayfasındaki önemli bilgileri uyarabilir ve bunlara dikkat çekebilirler. Pencereyi kaldırmak için kullanıcının bir tür eylem gerçekleştirmesi gerekir. Bu şekilde, kullanıcı pencereyle etkileşime girer ve amaçlanan bilgileri alır.