28 Mart 2015 Cumartesi

Css ile modal yapımı

HTML
    <a href="#modal">Aç</a>

    <div class="modal" id="modal">
        Ben Bir Garip Modal window örneğiyim
    </div>



CSS
.modal{
    position: fixed;
    background: white;
    /*padding: 30px;*/
    /*border: 1px solid black;*/
    left: 50%;
    top: 70px;
    width: 70%;
    max-width: 700px;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
    transform:translate(-50%,0);
    max-height: 0px;
    overflow: hidden;
}
.modal:target{
    position: fixed;
    background: white;
    padding: 30px;
    border: 1px solid black;
    left: 50%;
    top: 70px;
    width: 70%;
    max-width: 700px;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
    transform:translate(-50%,0);
    transition: all .5s ease;
}   

Hiç yorum yok:

Yorum Gönder