js制作弹窗

不念不忘少年蓝@ 2024-04-18 18:40 89阅读 0赞

个人见解，欢迎大家一起交流学习n(\*≧▽≦\*)n

效果图：

![2019091016350945.gif][]

**html页面**

<body>
    <button class="clickButton confirm">点击</button>
    <div style="display: none" name="addImageInfo-con">
        这是内容
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./js/iconfont.js"></script>
    <script src="./js/popup.js"></script>
    <script>
        $("button").click(function () {
            let diaLog = $.Dialog({
                title: "test",
                "content" : $("div[name=addImageInfo-con]").html(),
                button: [
                    {
                        txt: "确认",
                        callback: function () {
                            // diaLog.close();
                        }
                    }, {
                        txt: "取消",
                        className: "cancel"
                    }
                ]
            })
        })
    </script>
    </body>

**popup.js**

**popup.css**

* {
        margin: 0;
        padding: 0;
    }
    
    .icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .dialog {
        width: 100%;
        height: 100%;
    }
    
    .containBack {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: rgba(3, 20, 32, 1) none repeat scroll 0 0;
        opacity: 0.3;
    }
    
    .popup {
        position: absolute;
        background-color: white;
        z-index: 10000;
        border-radius: 10px;
        width: 580px;
        height: 380px;
        left: 50%;
        top: 50%;
        margin-left: -290px;
        margin-top: -190px;
    }
    
    .popupMax {
        width: 860px;
        height: 540px;
        left: 50%;
        top: 50%;
        margin-left: -430px;
        margin-top: -270px;
    }
    
    .popupTop {
        width: 100%;
        height: 50px;
        background-color: #38455A;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        cursor: move;
    }
    
    .popTitle {
        position: absolute;
        color: #ffffff;
        line-height: 50px;
        left: 10px;
    }
    
    .popClose {
        position: absolute;
        color: #ffffff;
        top: 18px;
        right: 18px;
        font-size: 14px;
    }
    
    .popClose,.maximize:hover {
        cursor: pointer;
    }
    
    .maximize {
        position: absolute;
        color: #ffffff;
        top: 18px;
        right: 50px;
        font-size: 16px;
    }
    
    .content {
        width: 100%;
        height: calc(100% - 112px);
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    .defaultButton {
        border: none;
        background-color: transparent;
        outline: none;
    }
    
    .divButton {
        position: relative;
        height: 62px;
        border-top: 1px solid #E9ECEF;
    }
    
    .button {
        position: absolute;
        right: 15px;
    }
    
    .button button{
        margin-right: 15px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        border-radius: 2px;
        padding: 0 20px;
        margin-top: 15px;
        cursor: pointer;
    }
    
    .confirm {
        background-color: #1188DD;
        color: #ffffff;
        margin-right: 20px !important;
    }
    
    .confirm:hover {
        background-color: #004499;
    }
    
    .cancel {
        background: #EEF7FF;
        color: #1188DD;
    }
    
    .cancel:hover {
        background: #DDEEFF;
    }

[2019091016350945.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bff24c854dbc4e11856124bb119e31d5.gif