开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

相信模态框这个定义大家很熟悉了,现在我们很多组件库里面都有模态框,像element-ui这个组件库的模态框就是利用 div去模拟的,但是现在出现了一个新的特性,原生dialog出现了.让我们去看看吧

自定义模态框

自定义的模态框就是使用div去模拟的,同时使用fixed定位,设置z-index让这个元素在所有元素之上.一个模态框大致可以分为三个区域:

顶部:顶部主要放标题，和关闭按钮（顶部右上角是个按钮，可以换别的但是按钮有点击效果），非必须。
主体:用来存放主要控件，比如你要使用模态框做登录，那么登录主体控件（输入框、提示）就放在主体部分。
底部:底部主要用来放一些按钮，比如关闭按钮、确定按钮等，按钮大小位置都可以自己决定。非必须。


<div class="dialog-container">
  <div class="dialog-top">模态框顶部</div>
  <div class="dialog-main">
    内容区域
  </div>
  <div class="dialog-bottom">底部</div>
</div>

.dialog-container{
  position: fixed;
  top: 0px;
  left: 0px;
  margin-top: 10vh;
  margin-left: 10vw;
  border: 1px solid burlywood;
  z-index: 2023;
  color: #fff;
}
body{
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

得到的结果如下:

原生模态框

现在出现了原生dialog,它表示一个对话框或其它交付组件,可以用来做警告或者窗口.我们可以设置open属性时会激活dialog,同时也可以使用show()或showModal()方法来渲染对话框. 像这样:

<dialog open>
   这是一个模态框
</dialog>

同时我们可以在里面加一个关闭按钮(这是非常有必要的).

<dialog id="dialog" open>
   这是一个模态框
   <button class="close">关闭 </button>
</dialog>


document.querySelector(".close").addEventListener("click",()=>{
  document.querySelector("#dialog").close()
})

得到的结果如下:

我们只要点击关闭按钮,dialog就会消失.

模态框: 原生 or 自定义

自定义模态框

原生模态框