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>
