css怎么做模态框

CSS是Web开发中必不可少的技术之一，它可以让我们实现各种炫酷的效果。在本文中，我们主要讨论如何用CSS实现模态框。

模态框也叫弹窗，是Web开发中比较常见的组件。它可以展示一些重要的内容，比如提示、确认、登录等，同时遮罩层就可以避免其他元素的操作。

/* HTML结构 */div class="modal">
      div class="modal-dialog">
        div class="modal-content">
          div class="modal-header">
            h4 class="modal-title">
    这里是标题/h4>
            button type="button" class="close">
    ×/button>
          /div>
          div class="modal-body">
            这里是内容      /div>
          div class="modal-footer">
            button type="button" class="btn btn-outline-danger">
    取消/button>
            button type="button" class="btn btn-primary">
    确定/button>
          /div>
        /div>
      /div>
    /div>

首先我们需要定义模态框的样式，比如背景色、边框、宽度等。

/* CSS样式 */.modal {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
      position: relative;
      margin: 0 auto;
      padding: 20px;
      max-width: 480px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.modal-content {
      position: relative;
      padding: 0;
      border: none;
}
.modal-header {
      padding: 10px;
      background: #f7f7f7;
      border-bottom: 1px solid #e5e5e5;
}
.modal-title {
      margin: 0;
}
.modal-body {
      padding: 20px;
}
.modal-footer {
      padding: 10px;
      background: #f7f7f7;
      border-top: 1px solid #e5e5e5;
      text-align: right;
}
    

接下来是JavaScript的部分，我们需要用它来实现模态框的显示、关闭、按钮点击等功能。

/* JavaScript代码 */var modal = document.querySelector('.modal');
    var closeBtn = modal.querySelector('.close');
    var cancelBtn = modal.querySelector('.btn-outline-danger');
    var confirmBtn = modal.querySelector('.btn-primary');
// 显示模态框function showModal() {
      modal.style.display = 'block';
}
// 关闭模态框function closeModal() {
      modal.style.display = 'none';
}
    // 按钮点击事件cancelBtn.addEventListener('click', closeModal);
    confirmBtn.addEventListener('click', closeModal);
// 监听Esc键和遮罩层点击事件document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' || e.keyCode === 27) {
        closeModal();
  }
}
    );
modal.addEventListener('click', function(e) {
  if (e.target === modal) {
        closeModal();
  }
}
    );
    

到这里，一个简单的模态框就完成了。当然，我们还可以对它进行样式、功能的扩展和优化。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！