• JavaScript dialog yapımı

0
window.document.getElementById("dialog_content").style.marginTop = ((window.innerHeight/2)-(window.document.getElementById("dialog_content").offsetHeight))+"px";

window.document.getElementById("dialog_open").onclick = function(){
    window.document.getElementById("dialog_box").style.display = "inherit";
};

window.document.getElementById("dialog_close").onclick = function(){
    window.document.getElementById("dialog_box").style.display = "none";
};
body{
    font-family:Arial;
    font-size:12px;
}

a#dialog_open{
    text-decoration:none;
    background-color:#dddddd;
    padding:5px;
    display:inner-block;
}

a#dialog_close{

}

div#dialog_box{
    display:none;
    background-color:rgba(0, 0, 0, 0.39);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

div#dialog_content{
    width:300px;
    height:300px;
    margin:0 auto;
    background-color:#ffffff;
}

div#dialog_content > h3{
    background: #cccccc;
    margin: 0;
    padding: 5px 5px 1px 5px;
    height: 20px;
    overflow: hidden;
}

div#dialog_content > h3 > a{
    text-decoration:none;
    font-weight: normal;
    float:right;
    color:#666666;
    margin-top: -2px;
}

div#dialog_content > p{
    overflow:hidden;
    margin:0;
    padding:0;
}
<div id="dialog_box">
    <div id="dialog_content">
        <h3>test Başlık <a href="javascript:void(0);" id="dialog_close">&#10006;</a></h3>
        <p>burası test içerik</p>
    </div>
</div>

<a href="javascript:void(0);" id="dialog_open">Pençere Aç</a>

  • Cevaplar

  • Senin Cevabın


Adı ve soyadı * Misafir olarak cevap yazabilirsiniz.
E-Posta *
 

Cevap Bekleyen Sorular

Sıcak Tartışmalar

Popüler Etiketler

Faydalı Kaynaklar