Web tabanlı uygulamalar geliştirilirken karşılaşılan zorluklar her zaman bizi araştırmaya ve yeni birşeyler öğrenmeye zorluyor. Bilişim dünyası ucu bucağı olmayan bir evren, her geçen gün yeni teknolojiler, yeni teknikler, yeni methotlar çıkıyor.
    Aslında Css ve JavaScript kullanılarak yapılan Dialog Box çok da yeni bir şey değil ama ben bu konuyu bloğumda işlemek istedim.

 
Bunlar Css Kodlarımız:

 1:  <style>
 2:  #myBox {
 3:      visibility: hidden;
 4:      position: absolute;
 5:      left: 0px;
 6:      top: 0px;
 7:      width:100%;
 8:      height:100%;
 9:      text-align:center;
10:      z-index: 1000;
11:  }

12:  #myBox div
13:  {
14:      border: 1px double #98B5E2;
15:      width: 450px;
16:      margin: 100px auto;
17:      background-color: #C2D3FC;
18:      padding: 15px;
19:      text-align: left;
20:  }   
21:  </style>

JavaScript Kodlarımız :

   1:  <script type="text/javascript"> 
   2:   function acKapa() { 
   3:     el = document.getElementById("myBox"); 
   4:     el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";} 
   5:  </script>

HTML Kodlarımız : 

   1:  <input id="Button1" onclick='acKapa()' type="button" value="Aç" /> 
   2:  <div id="myBox"> 
   3:      <div align="left"> 
   4:          <img src="about.png" align="left" alt="Error" border="0" /> 
   5:          <center> 
   6:              <strong>Bilgi</strong> 
   7:          </center> 
   8:          <p align="left"> 
   9:              Mesajınız mesajınız mesajınız mesajınız mesajınız mesajınız  
  10:          </p> 
  11:          <center> 
  12:              <input id="Kapat" onclick='acKapa()' type="button" value="Kapat" /> 
  13:         </center> 
  14:      </div> 
  15:  </div>