javascript Demo模态窗口

下面是关于JavaScript Demo模态窗口的完整攻略：

简介

Demo模态窗口是一种常见的Web开发技术，用于在页面中显示交互式传达信息、获取用户反馈等操作。本文将详细介绍如何使用JavaScript实现Demo模态窗口。

实现方式一：使用HTML和CSS

HTML部分

首先在页面中加入一块隐藏的HTML代码块，用于存放模态窗口的结构，例如:

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这里是模态窗口的内容</p>
  </div>
</div>

这里，modal是模态窗口的外层容器，设置为display:none以在一开始隐藏窗口；modal-content是窗口的内容容器，用于放置窗口内部的各种元素；close是一个使用了特殊字符×的按钮，用于关闭模态窗口。

CSS部分

使用CSS对模态窗口进行设定，实现中间灰色遮罩层和表单居中等样式。例如：

.modal {
  display: none; /* 先隐藏模态框 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 模态框放在最上层 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4); /* 英文单词color写错了 */
}

.modal-content {
  background-color: white;
  margin: 15% auto; /* 在页面中居中 */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

上面的代码实现模态窗口遮罩层透明度40%、窗口在页面中居中等效果。

JavaScript部分

下面是实现模态窗口显示和关闭的JavaScript代码：

// 获取模态窗口
var modal = document.getElementById("modal");

// 获取关闭按钮
var closeBtn = document.getElementsByClassName("close")[0];

// 当用户点击关闭按钮或任何地方，关闭窗口
window.onclick = function(event) {
  if (event.target === modal || event.target === closeBtn) {
    modal.style.display = "none";
  }
};

// 当需要显示模态窗口时
modal.style.display = "block";

上面的代码使用了获取元素、事件监听、控制样式等技术，实现了点击关闭按钮或任意外部区域时关闭模态窗口的功能，以及控制模态窗口的显示。

实现方式二：使用JS插件

除了手动编写HTML代码和JavaScript代码以外，还有一些针对模态窗口的JS插件，可以方便快捷地实现模态窗口的效果和交互事件绑定。

Bootstrap插件

Bootstrap是一个流行的前端开发框架，其中包含了一些实用的JS组件，包括模态窗口。使用Bootstrap实现模态窗口的大致流程如下：

1. 引入Bootstrap CSS和JS文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1. 在HTML文件中添加模态窗口的内容。

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">模态窗口的标题</h4>
      </div>
      <div class="modal-body">
        <p>这里是模态窗口的内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

1. 使用JavaScript触发模态窗口的显示。

$(document).ready(function(){
  $("#myModal").modal();
});

上面的代码使用了Bootstrap提供的modal()方法，将myModal元素设为模态窗口，并触发窗口显示。

SweetAlert2插件

SweetAlert2是另一个流行的JavaScript插件，主要用于创建漂亮的交互式弹窗。其中也包含模态窗口的设计和实现。使用SweetAlert2实现模态窗口的大致流程如下：

1. 引入SweetAlert2的CSS和JS文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.min.js"></script>

1. 使用SweetAlert2中的fire()方法创建模态窗口。

swal({
  title: '模态窗口的标题',
  html: '<p>这里是模态窗口的内容</p>',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: '确定',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: '取消',
  cancelButtonAriaLabel: 'Thumbs down'
})

上面的代码使用了SweetAlert2提供的fire()方法，创建了一个带标题、内容、关闭按钮和确认按钮的模态窗口，并以此开启交互式操作。

结论

这次，我们通过HTML、CSS、JavaScript和两个常用插件的介绍，全面掌握了Demo模态窗口的制作。无论是手工制作，还是使用插件，都可以帮助我们更好地展示和获取用户信息，并提高Web页面的交互性和美观度。