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