modallayer模态弹出层弹出框效果代码-html代码-BFW代码库

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"></i>点击遮罩层自动消失!',
            };

            ModalLayer.msg(option);
            // ModalLayer.msg('测试一下');
        }
        // 测试alert
        document.querySelector('#alert-button').onclick = function () {
            let option = {
                hook: {
                    initStart: function () {
                        // 检查之前老旧实例如果存在则销毁
                        if (document.querySelector('#modal-layer-container'))
                            ModalLayer.removeAll();
                    }
                },
                popupTime: 0,
                type: 'alert',
                title: '测试',
                dragOverflow: true,
                content: '<i class="fas fa-check" style="color: deepskyblue"></i>点击遮罩层自动消失!',
            };

            ModalLayer.alert(option);
        }
        // 测试confirm
        document.querySelector('#confirm-button').onclick = function () {
            let option = {
                title: '测试',
                popupTime: 10,
                hook: {
                    initStart: function () {
                        // 检查之前老旧实例如果存在则销毁
                        if (document.querySelector('#modal-layer-container'))
                       .........完整代码请登录后点击上方下载按钮下载查看