Sadece CSS kullanarak Pop-up hazırlamak

Sadece css kullanarak sitelerinizin açılışına pop-up (otomatik açılır pencere) ekleyebilirsiniz. Basit html kodları ve css kullanarak bunu yapmak mümkün. Hemde farklı ekranlarda rahatlıkla çalışabilecek şekilde responsive olarak hazırlayabilirsiniz.

HTML

<div id="pca-popup">
    <div id="pca-popup" class="pca-popup">
    İçerik (yazı yada resim)
    <a href="#" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">X</a>
    </div>
</div>

CSS

#pca-popup {position:absolute;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; margin:0; z-index:99999; background:rgba(0,0,0,0.8);}
#pca-popup a { text-decoration:none; position:absolute; padding: 7px 10px; background:#000; font-size: 18px; color: #fff; font-weight: 100; top: 0; right: 0;}
#pca-popup {overflow:hidden;z-index:999999;}
.pca-popup {position:absolute; margin: auto; left: 0; right: 0; top: 10vh; z-index:99999; max-width: 800px;}
.exestylepopup img { width: 100%; }