Html5 ile dialogbox yapmak

Bu makalemizde Html, Css ve JavaScript kullanarak dialog box yapmayı inceleyeceğiz.

Htmle aşinalığız var ise meşhur alert() fonkisyonunu kullanmışsınızdır. Şayet alert ("Merhaba Dünya") yazarsanız aşağıdaki gibi bir dialog box dönecektir.

Dialog box üç bölümden oluşturalacaktır. Header, Body ve Footer.

Kodlama başlayalım.

<div id="white-background"></div>
<div id="dlgbox">
<div id="dlg-header">Mesaj başlık</div>
<div id="dlg-body">Mesaj gövdesi</div>
<div id="dlg-header">
<asp:Button ID="btnCloseBox" runat="server" Text="Button" OnClientClick="dlgLogin()" />
</div>
</div>
<asp:Button ID="btnShowDialog" runat="server" Text="Button" OnClientClick="return showDialog()" />

btnShowDialog idli butonumuzun OnClientClick özelliğinde return'e dikkat ediyoruz. Javascript kodlarımızda bura hakkında açıklama yapacağım.

Dialog box html tasarımı bitti şimdi css tarafını şekillendirelim

#white-background {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color:#ffffff;
opacity:0.7;
z-index:9999;

}
#dlgbox {
position:fixed;
display: none;width:350px;

z-index:9999;
border-radius:10px;
background-color:#7c7d7e;
left:500px;
top:150px;
}
#dlg-header
{
font-family:TitilliumWeb-Bold;
background-color:#000000;
color:white;
font-size:20px;
padding:10px;
margin:10px 10px 0 10px;
}
#dlg-body
{
background-color:white;
color:black;
font-size:14px;
padding:10px;
margin:0px 10px 0px 10px;
}
#dlg-footer {
background-color:#6d84b4;
text-align:right;

padding:10px;
margin:0px 10px 10px 10px;
}
#dlg-footer button {
background-color:#6d84b4;
color:white;
padding:5px;
border:0px;
}

Tasarımın görüntüsü :



<script>
function dlgLogin() {
var whitebg = document.getElementById("white-background");
var dlg = document.getElementById("dlgbox");
whitebg.style.display = "none";
dlg.style.display = "none";
return false;
}

function showDialog() {
console.log("asd");

var whitebg = document.getElementById("white-background");
var dlg = document.getElementById("dlgbox");
whitebg.style.display = "block";
dlg.style.display = "block";

var winWidth = window.innerWidth;
var winHeight = window.innerHeight;

return false;

//dlg.style.left(winWidth / 2) - 480 / 2 + "px";
//dlg.style.top = "150px";

}

</script>

JavaScript kodlarımızda tamamdır. Dialog box'ımız bir sorun yoksa çalışacaktır. Yukarıda return ifadesine dikkat çekmiştim.
Bu komut butonumuzun postback yapmasını engelleyecektir. Aksi takdirde sayfa post olduğundan dialog box gözükmeyecektir.

Kolay Gelsin