M站 confirm 插件

2022-10-23 17:20:40

/*弹出提示*/
.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

码农公寓

相关文章