​x
 
<!DOCTYPE html>
<html>
<head>
<style>
button {
  font-size: 15px;
  padding: 5px 15px;
}
​
dialog::backdrop {
  background-color: lightgreen;
}
</style>
</head>
<body>
​
<h1>::backdrop 演示</h1>
​
<p>点击按钮显示对话框：</p>
​
<button id="dialogBtn">显示对话框</button>
​
<dialog id="myDialog">
  <form method="dialog">
    <p>此对话框的背景是一个 backdrop。</p>
    <button>关闭对话框</button>
  </form>
</dialog>
​
<script>
const dialogBtn = document.getElementById('dialogBtn');
const myDialog = document.getElementById('myDialog');
​
dialogBtn.addEventListener('click', () => myDialog.showModal());
</script>
​
</body>
</html>
​