/*弹出提示*/
.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 插件的更多相关文章

  1. 最近总想着写一个模拟alert和confirm插件,代替原生的

    msgbox-confirm github:  https://github.com/tong-mikasa/msgbox-confirm 主要js代码,scss代码 (function($) { $ ...

  2. jquery的confirm插件介绍

    参考:1.http://craftpip.github.io/jquery-confirm/ 2.http://www.bootcdn.cn/jquery-confirm/readme/    3.h ...

  3. 【百度地图API】——国内首款团购网站的地图插件

    原文:[百度地图API]--国内首款团购网站的地图插件 摘要: 本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站.使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在 ...

  4. 【Jenkins】使用 Jenkins REST API 配合清华大学镜像站更新 Jenkins 插件

    自从去年用上了 Jenkins 进行 CI/CD 之后,工作效率高了不少,摸鱼的时间更多了.不过 Jenkins 好是好,但在功夫网的影响下,插件就是经常更新不成功的,就像下面这样子: 查了不少资料, ...

  5. 我的wordpress插件总结

    酷壳(CoolShell.cn)WordPress的插件 注意: 下面的这些插件的链接是其插件主页的链接,你可以在WordPress后台管理中添加插件时直接搜索安装就可以了. 插件不是越多越好.WP的 ...

  6. Chrome 67 以后版本无法离线安装crx插件

    原文链接:https://blog.csdn.net/wanwuguicang/article/details/80716178 升级了Chrome后无法离线安装扩展 如图: 谷歌自Chrome 67 ...

  7. 拿wordpress站的一个小技巧

    记得09年时wp爆过一个重置管理口令的漏洞, 现在用法差不多, 也是我刚刚发现, 网上也没找到有讲述关于这个的. 前提:是在有注入点(注入点的话可以通过寻找插件漏洞获得.), 密码解不开, 无法out ...

  8. 2020年B2B外贸建站的终极教程

    本文目标:按照本建站教程的顺序操作,能够实现:基于全球份额最大的建站系统“wordpress”,从零搭建一个B2B外贸网站,且建站成本每年小于1000元(如果不计算自己投入的人力成本的话). 模板站点 ...

  9. vue自定义插件封装,实现简易的elementUi的Message和MessageBox

    vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template>     <transition  ...

随机推荐

  1. Android程序架构基本内容概述

    在Android操作系统中开发的应用程序都有一个结构缜密的架构.我们今天就来对这一Android程序架构做一个详细的分析.帮助大家了解程序开发的特点,以方便将来在应用程序开中明确自己的程序架构. An ...

  2. 正则化,数据集扩增,Dropout

    正则化方法:防止过拟合,提高泛化能力 在训练数据不够多时,或者overtraining时,常常会导致overfitting(过拟合).其直观的表现如下图所示,随着训练过程的进行,模型复杂度增加,在tr ...

  3. 定制Bootstrap遇到无法下载的解决——Blob下载注意事项

    今天定制bootstrap(在这里),全部的勾都选过了,于是兴高采烈地点击“编译并下载”.等了一会儿,迅雷7跳出来了“新建下载任务”,但是它居然说这个url不合法! url像这样: blob:http ...

  4. ubuntu eclipse 安装svn

    1.helper->install new software 在弹出的窗口中work with 输入http://subclipse.tigris.org/update_1.6.x 2.下面窗口 ...

  5. core文件分析

    http://baidutech.blog.51cto.com/4114344/904419/ http://www.newsmth.net/pc/pccon.php?id=10001977& ...

  6. 一个强大的LogParser的UI工具--logparserlizard简介

    日志分析,特别是IIS日志,一般人都会想到LogParser工具,的确很强.但是命令行的操作界面令很多非专业的管理人员望而生畏,现在好了,有一个可视化的LogParser的UI工具可以使用了! Log ...

  7. Android中垃圾回收日志信息

    原因 GC_CONCURRENTfreed 178K, 41% free 3673K/6151K, external 0K/0K, paused 2ms+2msGC_EXPLICITfreed 6K, ...

  8. Delphi 异或,英文为exclusive OR,或缩写成xor

    异或,英文为exclusive OR,或缩写成xor 异或(xor)是一个数学运算符.它应用于逻辑运算.异或的数学符号为“⊕”,计算机符号为“xor”.其运算法则为: a⊕b = (¬a ∧ b) ∨ ...

  9. [转]Linux文件和目录操作命令

    转自:http://www.linuxdiyf.com/bbs/thread-416176-1-1.html 一.文件操作命令1.1 查看文件 Linux下查看文件的命令有很多,下面列出的几个是几乎所 ...

  10. Initializing a Build Environment

    This section describes how to set up your local work environment to build the Android source files. ...