html卡片弹窗提示代码

HTML卡片弹窗提示是一种常见的Web页面交互效果，可以让用户更加直观地获得提示信息。下面是一个示例代码：

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button,open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on  (x),close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal,close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

在这个示例中，可以看到有一个按钮（id为“myBtn”），当用户点击该按钮时，会弹出一个模态框（id为“myModal”）。模态框内包含一个头部、主体和尾部。头部中有一个关闭按钮（id为“close”）。当用户点击关闭按钮、模态框外部或按下Esc键时，模态框会关闭。