M站 confirm 插件

Posted 2020-08-09 龍四

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了M站 confirm 插件相关的知识，希望对你有一定的参考价值。

/*弹出提示*/
.pop-error{position:absolute; left:25%; top:50%; width:200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7f000000, endColorstr=#7f000000); background-color:rgba(0,0,0,0.6);z-index:9999; color:#fff; text-align:center; padding:10px; border-radius:5px; font-size:12px;}
.common-pop-up-layer{position:absolute; width:100%; height:100%; left:0px; top:0px;FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7f000000, endColorstr=#7f000000); background-color:rgba(0,0,0,0.6);z-index:9999}
.common-pop-up-layer-content{position: fixed; top:40%; left:10%; right:10%; font-size:14px; color:#fff; width:80%; background:#fff; border-radius:5px; line-height:22px;}
.common-pop-up-layer-content p{display:block; text-align:center; font-size:16px; color:#404040;}
.common-pop-up-layer-box{padding:20px 0px; width:90%; margin:0px auto; line-height:20px;}
.common-pop-up-layer-content p.common-pop-up-layer-operating{width:100%; border-top:1px solid #eee;}
.common-pop-up-layer-content p.common-pop-up-layer-operating span{ float:left; width:49%; text-align:center; border-right:1px solid #eee; height:50px;}
.common-pop-up-layer-content p.common-pop-up-layer-operating span:last-child{ border-right:none;}
.common-pop-up-layer-content p.common-pop-up-layer-operating a{display:block; height:50px; line-height:50px;color:#47A8EF;}
.common-pop-up-layer-content p.common-pop-up-layer-operating span.common-pop-up-layer-button{width:100%;}
.common-pop-up-layer-content p.common-pop-up-layer-operating i{height:40px; line-height:40px; display:block; text-align:center; font-style:normal;}

js部分：

var common={

//弾出确认对话框。
//msg 弹出消息
//funOk 点击“确定”按钮执行的方法(null不执行)
//funCancel 点击“取消”按钮执行的方法(null不执行)
confirm: function (msg, funOk, funCancel) {
//初始化弹窗。
common.initConfirm();

//生成confirm按钮。
var confirmhtml = "<span><a id=\"lbtConfirOK98512699\" href=\"javascript:void(0);\">确定</a> </span><span><a id=\"lbtConfirCancel98512699\" href=\"javascript:void(0);\">取消</a> </span>";
$(".common-pop-up-layer-operating").html(confirmHtml);

//显示弹窗内容。
$(".common-pop-up-layer-box").html(msg);

//显示弹出消息。
var $divLayer = $(".common-pop-up-layer");
var arr = common.getPageSize();
$divLayer.css("height", arr[1] + "px");

//计算弹窗内容显示高度。
var $divContent = $(".common-pop-up-layer-content");
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//var h = scrollTop + ((parseInt(arr[3]) - 91) / 2);
var h = ((parseInt(arr[3]) - 91) / 2);
$divContent.css("top", h + "px");

//弹出对话框。
$divLayer.show();

//“确认”按钮事件。
$("#lbtConfirOK98512699").bind("click", function () {
$(".common-pop-up-layer").hide()
if (null != funOk)
funOk();
});

//“取消”按钮事件。
$("#lbtConfirCancel98512699").bind("click", function () {
$(".common-pop-up-layer").hide();
if (null != funCancel)
funCancel();
});
},
//初始化弹窗确认框。
initConfirm: function () {
//查找弹窗如果存在直接返回。
var div = $(".common-pop-up-layer");
if (null == div[0]) {
//创建弹窗对象。
var html = "<div class=\"common-pop-up-layer\" style=\"display: none;\"><div class=\"common-pop-up-layer-content\"><p class=\"common-pop-up-layer-box\">您确认要退出吗？</p><p class=\"common-pop-up-layer-operating\"></p></div></div>";
$("body").append(html);
}
},

//获取页面尺寸。
getPageSize: function () {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}

arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}

}

完整Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>测试</title>
    <style type="text/css">
            /*弹出提示*/
            .pop-error{position:absolute; left:25%; top:50%; width:200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7f000000, endColorstr=#7f000000); background-color:rgba(0,0,0,0.6);z-index:9999; color:#fff; text-align:center; padding:10px; border-radius:5px; font-size:12px;}
            .common-pop-up-layer{position:absolute; width:100%; height:100%; left:0px; top:0px;FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7f000000, endColorstr=#7f000000); background-color:rgba(0,0,0,0.6);z-index:9999}
            .common-pop-up-layer-content{position: fixed; top:40%; left:10%; right:10%; font-size:14px; color:#fff; width:80%; background:#fff; border-radius:5px; line-height:22px;}
            .common-pop-up-layer-content p{display:block; text-align:center; font-size:16px; color:#404040;}
            .common-pop-up-layer-box{padding:20px 0px; width:90%; margin:0px auto; line-height:20px;}
            .common-pop-up-layer-content p.common-pop-up-layer-operating{width:100%; border-top:1px solid #eee;}
            .common-pop-up-layer-content p.common-pop-up-layer-operating span{ float:left; width:49%; text-align:center; border-right:1px solid #eee; height:50px;}
            .common-pop-up-layer-content p.common-pop-up-layer-operating span:last-child{ border-right:none;}
            .common-pop-up-layer-content p.common-pop-up-layer-operating a{display:block; height:50px; line-height:50px;color:#47A8EF;}
            .common-pop-up-layer-content p.common-pop-up-layer-operating span.common-pop-up-layer-button{width:100%;}
            .common-pop-up-layer-content p.common-pop-up-layer-operating i{height:40px; line-height:40px; display:block; text-align:center; font-style:normal;}
    </style>

    <!-- jQuery Include -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">        
    var  common={

                //弾出确认对话框。
                //msg 弹出消息
                //funOk 点击“确定”按钮执行的方法(null不执行)
                //funCancel 点击“取消”按钮执行的方法(null不执行)
                confirm: function (msg, funOk, funCancel) {
                    //初始化弹窗。
                    common.initConfirm();

                    //生成confirm按钮。
                    var confirmHtml = "<span><a id=\"lbtConfirOK98512699\" href=\"javascript:void(0);\">确定</a> </span><span><a id=\"lbtConfirCancel98512699\" href=\"javascript:void(0);\">取消</a> </span>";
                    $(".common-pop-up-layer-operating").html(confirmHtml);

                    //显示弹窗内容。
                    $(".common-pop-up-layer-box").html(msg);

                    //显示弹出消息。
                    var $divLayer = $(".common-pop-up-layer");
                    var arr = common.getPageSize();
                    $divLayer.css("height", arr[1] + "px");

                    //计算弹窗内容显示高度。
                    var $divContent = $(".common-pop-up-layer-content");
                    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
                    //var h = scrollTop + ((parseInt(arr[3]) - 91) / 2);
                    var h = ((parseInt(arr[3]) - 91) / 2);
                    $divContent.css("top", h + "px");

                    //弹出对话框。
                    $divLayer.show();

                    //“确认”按钮事件。
                    $("#lbtConfirOK98512699").bind("click", function () {
                        $(".common-pop-up-layer").hide()
                        if (null != funOk)
                            funOk();
                    });

                    //“取消”按钮事件。
                    $("#lbtConfirCancel98512699").bind("click", function () {
                        $(".common-pop-up-layer").hide();
                        if (null != funCancel)
                            funCancel();
                    });
                },
                //初始化弹窗确认框。
                initConfirm: function () {
                    //查找弹窗如果存在直接返回。
                    var div = $(".common-pop-up-layer");
                    if (null == div[0]) {
                        //创建弹窗对象。
                        var html = "<div class=\"common-pop-up-layer\" style=\"display: none;\"><div class=\"common-pop-up-layer-content\"><p class=\"common-pop-up-layer-box\">您确认要退出吗？</p><p class=\"common-pop-up-layer-operating\"></p></div></div>";
                        $("body").append(html);
                    }
                },

                //获取页面尺寸。
                getPageSize: function () {
                    var xScroll, yScroll;
                    if (window.innerHeight && window.scrollMaxY) {
                        xScroll = window.innerWidth + window.scrollMaxX;
                        yScroll = window.innerHeight + window.scrollMaxY;
                    } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                        xScroll = document.body.scrollWidth;
                        yScroll = document.body.scrollHeight;
                    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                        xScroll = document.body.offsetWidth;
                        yScroll = document.body.offsetHeight;
                    }
                    var windowWidth, windowHeight;
                    if (self.innerHeight) {    // all except Explorer
                        if (document.documentElement.clientWidth) {
                            windowWidth = document.documentElement.clientWidth;
                        } else {
                            windowWidth = self.innerWidth;
                        }
                        windowHeight = self.innerHeight;
                    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                        windowWidth = document.documentElement.clientWidth;
                        windowHeight = document.documentElement.clientHeight;
                    } else if (document.body) { // other Explorers
                        windowWidth = document.body.clientWidth;
                        windowHeight = document.body.clientHeight;
                    }
                    // for small pages with total height less then height of the viewport
                    if (yScroll < windowHeight) {
                        pageHeight = windowHeight;
                    } else {
                        pageHeight = yScroll;
                    }
                    // for small pages with total width less then width of the viewport
                    if (xScroll < windowWidth) {
                        pageWidth = xScroll;
                    } else {
                        pageWidth = windowWidth;
                    }

                    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
                    return arrayPageSize;
                }    
    }

    function testConfirm(){
        common.confirm("确定要取消订单？",function(){
            alert(123);
        });
    }

    </script>
</head>
<body>    
    <input type="button" id="btn1" onclick="testConfirm();" value="取消订单" />
</body>
</html>

自定义 Confirm 完整Demo

以上是关于M站 confirm 插件的主要内容，如果未能解决你的问题，请参考以下文章

一个多用途的警报插件，confirm&；对话框，具有扩展功能。

WordPress - 代码片段插件

关于JavaScript中的confirm（）函数

VSCode插件开发全攻略代码片段设置自定义欢迎页

vue提示弹窗插件（alert、confirm、msg）

Wordpress - 将代码片段包含到布局的选定部分的插件