自定义 简单js弹窗

动态显示关闭 js:

    showImage = function (obj,maskLayer) {
        var isLayer=maskLayer || false;
        var style = $('<style></style>').append(" #close:before{\n" +
            "        content: 'x';\n" +
            "    }\n" +
            "    #close{\n" +
            "        position: absolute;\n" +
            "        top: 0;\n" +
            "        right: 0;\n" +
            "        transform: translate(60%,-60%);\n" +
            "        width: 30px;\n" +
            "        height: 30px;\n" +
            "        font-size: 22px;\n" +
            "        line-height: 1.2;\n" +
            "        border: 1px #333333 solid;\n" +
            "        border-radius: 50px;\n" +
            "        background: #fff;\n" +
            "        text-align: center;\n" +
            "        vertical-align: middle;\n" +
            "    }\n" +
            "    #showImage{\n" +
            "        display: table;\n" +
            "        background: #fff;\n" +
            "        box-shadow: 1px 0px 6px 1px;\n" +
            "        position: fixed;\n" +
            "        top: 50%;\n" +
            "        left: 50%;\n" +
            "        z-index: 99999;\n\n" +
            "        text-align: center;\n\n" +

            "\n}" +
            "    #showImage p{\n" +
            "     display: table-cell;\n" +
            "     vertical-align: middle;\n" +
            "     width: 500px;\n" +
            "     height: 300px;\n" +
            "\n}" +
            "    #showImage p img{\n" +
            "     max-width: 95%;\n" +
            "     max-height: 95%;\n" +
            "\n}" +


            "#maskLayer{\n" +
            "display: block;\n" +
            "position: absolute;\n" +
            "top: 0%;\n" +
            "left: 0%;\n" +
            "width: 100%;\n" +
            "height: 100%;\n" +
            "background-color: black;\n" +
            "z-index:99998;\n" +
            "-moz-opacity: 0;\n" +
            "opacity:0;\n" +
            "filter: alpha(opacity=80);\n" +
            "}\n"
        );


        var maskLayer = $('<div id="maskLayer">');
        var showImage = $('<div id="showImage">');
        showImage.append('<span id="close">', '<p><img src="' + ($(obj).attr('src')) + '" alt=""></p>');
        $('body').prepend(style, maskLayer,showImage);
        var top = ($(window).height() - $(showImage).height()) / 2  - ($(window).height() * 0.1);
        var left = ($(window).width() - $(showImage).width()) / 2;

        $(showImage).css({
            'top': top + 'px',
            'left': left + 'px',
        });
        $(maskLayer).height($(document).height());


        if(isLayer){
            $(maskLayer).css({
                "-moz-opacity": "0.5",
                "opacity":"0.5"
            })
            $(maskLayer).click(function () {
                close()
            })
        }
        $(document).on('click', '#close', function () {
            close()
        })

        function close(){
            $(style).remove();
            $(maskLayer).remove();
            $(showImage).remove();
        }


    }

需要改为文本内容:

将 p 标签更改为需要的内容及可；
现在这个是图片弹窗：
默认背景大小是：500*300
图片为：更具背景大小 等比例缩小显示

maskLayer参数：ture=显示遮罩层颜色（并点击遮罩关闭） | 默认 false=透明遮罩层（点击不能关闭）