CSS Ile Pop-Up Yapımı (Css İle Açılır Pencere Yapımı)

Web sitelerimizi hazırlarken çeşitli diller veya içerik yönetim sistemleri kullanabiliyoruz. Ben kendim web sitelerimi hazırlarken genelde Wordpress içerik yönetim sistemini kullanıyorum. Zaman zaman html ve css kullanarak çeşitli tasarımlar ortaya çıkarabiliyor veya css frameworklerini ( Bootstrap) kullanarak daha hızlı sonuçlar elde edebiliyoruz. Sitelerimiz çoğunda kullanmış olduğunuz Pop-Up çoğu zaman JS veya Jquery vs kullanılarak yapılabilmekte. Fakat ben harici kütüphaneler kullanmak istemediğimde tercihimi CSS’den yana kullanarak çözümlemeye çalışıyorum. Bu yazımda sizlere CSS ile Pop-up yapımı nasıl gerçekleştirebiliriz ona değinmeye çalışacağım.

Vereceğim kod yapısıyla çeşitli düzenlemeler yaparak menü olarakta kullanım sağlayabilirsiniz. Kullanım alanıza göre CSS ve Html kod satırlarını düzenleyerek bir menüye, pop-up veya reklam alanı olarak kullanabilirsiniz.

CSS Kodları

#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow:target {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}

HTML Kodları

<h1>CSS Pop-Up Örneği</h1>
<a href="#modalWindow">Aç</a>
<div id="container">
<p>
Ana Görünüm 
</p>
</div>
<div id="modalWindow">
<div>
<a href="#close">Kapat x</a><br>
<p>
İçerik Kısmı
<br><br>
<button type="button">Buton eklemeye ne dersin</button>
</p>
</div>
</div>

Tamamen Son hali

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Pop-Up Örneği</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow:target {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>

</head>
<body>
<h1>CSS Pop-Up Örneği</h1>
<a href="#modalWindow">Aç</a>
<div id="container">
<p>
Başlık Kısmı
</p>
</div>
<div id="modalWindow">
<div>
<a href="#close">Kapat X </a><br>
<p>
İçerik Kısmı
<br><br>
<button type="button">Buton eklemeye ne dersin?</button>
</p>
</div>
</div>
</body>
</html>

CSS ile Pop-Up yapımı konusunda bilgi vermeye çalıştım. Biraz olsun HTML ve CSS bilginiz varsa gerekli alanlarda düzenlemeleri yaparak istediğiniz gibi tasarımına ve içeriğine müdahalede bulunabilirsiniz. Bu sayede sadece pop-up olarak değil belki de harici bir mobil menü veya site içi ekstra bir menü olarakta kullanım sağlayabilirsiniz.