基于 js
的弹出框的插件有很多,例如:layer、Bootstrap-Modal、sweetalert2、phui-Modal
下面我将使用 phui-Modal 实现上一篇文章里面的弹出框的效果。
安装
npm install phui
引入
import Modal from 'phui/lib/Modal'
new Modal({
title: '标题',
content: '提示内容',
closeBtn: 1,
shadeClose: false,
})
就简单的两行代码就能实现了弹出框的效果。
未来 HTML dialog
标签是趋势,当越来越多浏览器支持后,我们可以转用 HTML dialog
标签进行简单包装即可,现在如果要使用的话,也可以选择dialog-polyfill,来做兼容处理。
下一篇文章将详细介绍 phui-Modal 的实现方式。