HTML <dialog> 元素

admin發表於2019-07-31
HTML

<dialog>是HTML5新增的語義化標籤之一。

關於語義化標籤的概念與作用可以參閱HTML 語義化佈局一章節。

一.<dialog>標籤作用：

<dialog>標籤可以建立一個具有一定動態效果和互動能力的對話方塊。

此標籤需要注意兩個屬性的應用：

（1）.此標籤上不能使用tabindex屬性。

（2）.如果設定open屬性，標籤產生的對話方塊處於顯示狀態。

特別說明：此標籤當前可能存在較大的瀏覽器相容性問題，所以謹慎使用。

二.程式碼例項：


[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
dialog p{
  text-align: center;
}
</style>
</head>
<body>
  <dialog open>
    <p>螞蟻部落</p>
  </dialog>  
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201907/31/213920gzxghzvxxce0ewun.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

給<dialog>新增open屬性即可讓其處於顯示狀態，不需要任何多餘的屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let favDialog=document.getElementById("favDialog");
  let cancelBtn=document.getElementById("cancelBtn");
  let confirmBtn=document.getElementById("confirmBtn");
  let show=document.getElementById("show");
  let ant=document.getElementById("ant");

  show.addEventListener('click', function() {
    favDialog.showModal();
  });
  favDialog.addEventListener('close', function onClose() {
    ant.innerHTML=favDialog.returnValue;
  });
}
</script>  
</head>
<body>
<dialog id="favDialog">
  <form method="dialog">
    <menu>
      <button id="cancelBtn" value="取消">取消</button>
      <input type="submit" id="confirmBtn" value="確定">
    </menu>
  </form>
</dialog>
<menu>
   <button id="show">顯示對話方塊</button>
</menu>
<div id="ant"></div>
</body>
</html>

上述程式碼是<dialog>與<form>元素的結合應用，程式碼分析如下：

（1）.form元素可以巢狀在dialog 元素之中，

（2）.將form的method屬性值設定為"dialog"即可將它們關聯起來。

（3）.當點選能夠使表單提交的按鈕，比如本程式碼中的submit按鈕或者button按鈕，能夠將對話方塊隱藏。

（4）.但是要注意的是，點選上述按鈕並沒有提交動作，因為method屬性值是"dialog"。

（5）.此時，會將對話方塊的returnValue值設定為提交按鈕的value屬性值。

也就是說點選哪個按鈕會使對話方塊隱藏，也就是會將哪個按鈕的value屬性值設定為對話方塊的returnValue值。

相關文章