使用原生的JS写弹窗

基本的弹窗

一个简易的弹窗制作

基本原理

首先一个弹窗的效果是：我们点击按钮，然后它会跳出来，点击关闭他就会关闭。

根据此效果，我们先确定4个元素：

• 按钮

• 关闭键

• 遮罩区

• 弹窗内容区

在创建的过程中，使用js控制遮罩的display这一属性，即可做出弹窗效果。

display:none -> display:block

实践

html部分

做出4要素的html

<button id="open">
    打开弹窗
</button>

<div id="myModal" class="modal">
  <div class="modal-content">
  <span class="close">
      &times;
  </span>
  <p>弹窗中的文本...</p>
  </div>
 
</div>

css部分

首先我们需要做出以 div.modal 为背景的遮罩：

.modal {
  display:none;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.3)
}

接着做出弹窗内容：

.modal-content {
    background: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    height:20%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
 

.close {
  position:absolute;
  top:0;
  right:10px;
  color:#aaa;
  font-size:28px;
  font-weight:bold;
}

//关闭特效
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

js控制弹窗

// 获取节点

var modal = document.getElementById('myModal');
 

var btn = document.getElementById("open");
 

var span = document.querySelector('.close');
 
//创建点击事件
btn.onclick = function() {
    modal.style.display = "block";
}
 

span.onclick = function() {
    modal.style.display = "none";
}
 
// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

其他

加点动画效果：

animation:window-open 0.2s 1;
@keyframes window-open
{
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}