modallayer模态弹出层弹出框效果代码
代码语言:html
所属分类:弹出层
代码描述:modallayer模态弹出层弹出框效果代码,可以弹出提示框、iframe页面、prompt、confirm alert等
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>模态框 - 开发</title>
<!--图标库-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css">
<!--图标库-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/all.5.11.2.js"></script>
<!--核心样式-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/modallayer.min.css">
<!--插件-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modallayer.min.js"></script>
<style>
#test-button-container {
position: absolute;
top: 50%;
left: 0px;
right: 0px;
width: 100%;
margin: 0px auto;
text-align: center;
transform: translateY(-50%);
}
#test-button-container button {
width: 145px;
margin: 5px 0px;
padding: 10px 0px;
}
</style>
</head>
<body>
<div id="test-button-container">
<button id="msg-button" type="button">测试msg</button>
<button id="alert-button" type="button">测试alert</button>
<button id="confirm-button" type="button">测试confirm</button>
<button id="prompt-button" type="button">测试prompt</button>
<button id="page-button-1" type="button">测试page</button>
<button id="page-button-2" type="button">测试page</button>
</div>
<script>
// 测试msg
document.querySelector('#msg-button').onclick = function () {
let option = {
popupTime: 2,
hook: {
initStart: function () {
// 检查之前老旧实例如果存在则销毁
if (document.querySelector('#modal-layer-container'))
ModalLayer.removeAll();
}
},
displayProgressBar: true,
displayProgressBarPos: 'top',
displayProgressBarColor: 'red',
content: '<i class="fas fa-check" style="color: deepskyblue".........完整代码请登录后点击上方下载按钮下载查看
网友评论0