HTML dialog etiketi

  • HTML etiketlerinden biri olan <dialog> etiketi yeni açılır bir iletişim kutusu oluşturmak için kullanılır.
  • <dialog> etiketi ile birlikte basit bir şekilde popup ve modal oluşturabiliriz.
  • HTML5 ile birlikte yeni gelen etiketlerden biridir.
  • open parametresi ile birlikte kullanılabilir. Bu parametre iletişim kutusunun açık ya da kapalı olması durumunu belirtir. Başlangıçta kapalı olan iletişim kutusunun open parametresi ile birlikte açık halde gelmesi sağlanabilir.

dialog etiketi kullanımı

<div>  
   <dialog id="exampleDialog" style="background-color: #e2e4e1;border:1px dotted black;">  
       <p>Lorem Ipsum</p>
       <button id="hide">Close</button>  
   </dialog>  
   <button id="show">Show Dialog</button>  
</div>  

<script type="text/JavaScript">  
(function() {    
    var dialog = document.getElementById('exampleDialog');    
    document.getElementById('show').onclick = function() {    
        dialog.show();    
    };    
    document.getElementById('hide').onclick = function() {    
        dialog.close();    
    };    
})();   
</script>  

dialog etiketi open parametresi

<dialog open> Content </dialog>
324 Views
38170cookie-checkHTML dialog etiketi

Leave a Reply

Your email address will not be published. Required fields are marked *