JavaScript showModal() 方法

admin發表於2019-08-01
JavaScript

showModal方法可以顯示Dialog對話方塊視窗。

關於對話方塊視窗可以參閱HTML <dialog> 標籤一章節。

此方法的功能與show()方法相同，但是對話方塊顯示後無法操作其他區域。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
dialogObject.showModal()

瀏覽器支援：

（1）.IE瀏覽器不支援此方法。

（2）.edge瀏覽器不支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器不支援此方法。

（5）.火狐瀏覽器不支援此方法。

（6）.safria瀏覽器支援此方法。

特別說明：瀏覽器支援度隨時可以能發生變化，以實測為準。

程式碼例項如下：

[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>
<script>
window.onload = ()=> {
  let obt=document.getElementById("bt");
  let favDialog=document.getElementById("favDialog");
  obt.onclick= ()=> {
    favDialog.showModal();
  }
}
</script>  
</head>
<body>
<input type="button" id="bt" value="檢視效果"/>
<dialog id="favDialog">
  <p>螞蟻部落</p>
</dialog>
</body>
</html>

上述程式碼中，點選按鈕可以將隱藏的對話方塊顯示出來。

相關文章