Plug: pop

Written before his pop a simple plug-in, simple and easy to use, not complicated; PC, mobile terminal can use

 

 Calling code:

new new . upBox () Show ({ // display the pop 
    title: 'test pop' , 
    width: '80% ' , 
    height: 300 , 
    Content: ' <Button ID = "test2"> hide </ Button> ' ,
     // maskLayerHide: // to false to true / to false 
}) 


new new . upBox () hide () // hide pop

 

 

Plug JS Source:

(function () {
    function upBox() {
    };

    upBox.prototype.show = function(option) { // 显示弹窗
        var _this = this;
        option = option ? option : {}
        option.width = option.width ? option.width : 400
        option.height = option.height ? option.height : 300
        option.title = option.title ? option.title : "标题"
        option.content = option.content ? option.content : "" // 内容
        option.maskLayerHide = (option.maskLayerHide == undefined) ? to true : option.maskLayerHide // whether to click on the mask layer to hide pop 
        var upBoxID = (Math.random () * 10000000) .toString (16) .substr (0,. 4) + ( new new a Date ()) the getTime (). Math.random + () toString () substr (2,. 5.. ); 
        
        IF (String (option.width) .indexOf ( "%") <0 ) { 
            option.width + = 'PX' 
        } 
        IF (String ( option.height) .indexOf ( "%") <0 ) { 
            option.height + = 'PX' 
        } 

        // render pop structure 
        var body = document.getElementsByTagName ( "body") [0 ]; 
        body.insertAdjacentHTML ( " beforeEnd " ,
            `
            <div id="upBox_${upBoxID}" class="upBox">
                <div class="upBox_container" style="width: ${option.width};height: ${option.height}">
                    <div class="upBox_container_head">
                        <div class="upBox_container_head_title">${option.title}</div>
                        <div id="upBox_CancelBtn_${upBoxID}" class="upBox_container_head_cancelBtn">X</div>
                    </div>
                    <div class="upBox_container_body">${option.content}</div>
                </div>
            </div>
        `);

        var thisUpBox = document.getElementById("upBox_" + upBoxID);
        
        setTimeout(function() { // display pop, delay timer to trigger the animation 
            thisUpBox.classList.add ( "upBoxShow" ); 
        }, 100 ); 

        // click to hide button to hide the pop 
        document.getElementById ( "upBox_CancelBtn_" + upBoxID) .addEventListener ( 'the click', function () { 
            _this.hide () 
        }, to false ); 

        thisUpBox.addEventListener ( 'the click', function (E) { // click mask layer to hide pop 
            IF (== e.target the this && option.maskLayerHide) { 
                _this.hide () 
            } 
        }, to false );
    }

    upBox.prototype.hide = function() { // 隐藏弹窗
        var body = document.getElementsByTagName("body")[0];
        var upBox = document.getElementsByClassName('upBox')[0]
        upBox.classList.remove("upBoxShow");
        setTimeout(function() {
            body.removeChild(upBox);
        }, 600);
    }

    window.upBox = upBox
})()

 

 

 

Plug CSS source code:

.upBox{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.6);
    font-family:"微软雅黑";
    box-sizing:border-box;
    transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: -o-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -o-flex-direction: row;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -o-align-items: center;
}
.upBoxShow{
    opacity: 1;
}
.upBox_container{
    border-radius: 5px;
    background: white;
}
.upBox_container_head{
    width: 100%;
    height: 35px;
    padding: 5px;
    line-height: 23px;
    box-sizing:border-box;
    border-bottom: 1px solid black;
}
.upBox_container_head:after{ /* 清除浮动 */
    content: "020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}
.upBox_container_head{
    zoom:1
}
.upBox_container_head_title{
    width: calc(100% - 25px);
    height: 100%;
    float: left;
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;
}
.upBox_container_head_cancelBtn{
    width: 25px;
    height: 100%;
    text-align: center;
    float: left;
    cursor:pointer;
}
.upBox_container_body{
    width: 100%;
    height: calc(100% - 35px);
}

 

 

The complete call cut a figure example: