在网页设计中，你可以使用模态窗口做很多事情。它们非常有用，可以吸引网站访问者的注意力，并将其用于任何目的，如提醒对话框、登录表单、联系表单等。

在本教程中，我将向您展示如何使用HTML、CSS和一点jQuery来创建一个在单击时打开的最小的干净模式窗口。

如何使用它:

1.为模式窗口编写HTML代码。

<div class="modal" id="example">
  <div class="inner_modal">
    <div class="modal_content">
      <h1>Modal Title</h1>
      <p>Modal Content</p>
    </div>
  </div>
</div>

2.在页面上创建一个模式触发按钮。

<button 
  open-modal="true" 
  modal-id="example">
  Open Modal
</button>

3.设置背景覆盖的样式。

.modal {
  width: 100vw;
  height: 100vh;
  background-color: rgba(16, 16, 16, 0.8);
  position: fixed;
  top: 0;
  z-index: 999;
  display: none;
  opacity: 0;
}
 
.modal.active {
  display: block;
  opacity: 1;
}
 
.modal .inner_modal {
  max-height: 100vh;
  box-sizing: border-box;
  display: block;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  padding: 0 20px;
}

4.设置模式窗口的主要内容的样式。

.modal .modal_content {
  width: 600px;
  max-width: 100%;
  background-color: white;
  display: block;
  margin: 5vh auto;
  padding: 50px;
}

5.当内容太长时，隐藏滚动条，但保留功能。

.modal .inner_modal::-webkit-scrollbar {
  display: none;
}

6.在文档中加载必要的jQuery JavaScript库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

7.启用触发按钮以打开模式窗口。

function closeModal(modal) {
  modal.removeClass('active');
}
 
function openModal(modal) {
  modal.addClass('active');
}
 
$('*[open-modal="true"]').click(function() {
  var modal = $(this).attr('modal-id');
  openModal($(`.modal#${modal}`));
});
 
$('.modal').click(function(e) {
  var clickTarget = $(e.target);
  if (clickTarget.attr('class') == 'inner_modal') {
      closeModal(clickTarget.closest('.modal'));
  }
});

预览截图

用jQuery和HTML/CSS构建简洁 模式窗口