CSS ile Popup Yapımı

Javascript’i kullanmadan, css ile native bir şekilde popup yapımını bu videoda sizlere anlatmaya çalıştım.

Nasıl çalışıyor?

Olayımız, checkbox’ı kullanmak ve css’de checked olduğunu anlayıp ona göre işlem yapmak. En basit örneğini şöyle göstermek istiyorum;

<div class="popup-container">
    <label for="popup">POPUP AÇ</label>
    <input type="checkbox" id="popup">
    <div class="popup">
        <div class="inner">
            popup içeriği
        </div>
    </div>
</div>

Burada label’a tıklandığında checkbox checked olacak. Dolayısı ile css’de şöyle bir kod yazdığımızda;

.popup-container input {
    position: absolute;
    left: -9999px;
}
.popup-container .popup {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    z-index: 90;
}
.popup-container .popup .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px;
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
}
.popup-container input:checked + .popup {
    opacity: 1;
    visibility: visible;
}

Burada olayımız input:checked + .popup kısmında. Bu sayede checked olduğunda ondan sonra gelen popup divini açabiliyoruz. Ayrıca kapatma işlemleri vs. de yine label üzerinden yapılabiliniyor. Daha detaylı anlatım ve aşağıdaki örneğin yapımı için videoya gözatmayı unutmayın ^^

See the Pen Popup with Pure CSS by Tayfun Erbilen (@tayfunerbilen) on CodePen.7393

İyi kodlamalar 🙂