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 插件的更多相关文章
- 最近总想着写一个模拟alert和confirm插件，代替原生的
msgbox-confirm github: https://github.com/tong-mikasa/msgbox-confirm 主要js代码,scss代码 (function($) { $ ...
- jquery的confirm插件介绍
参考:1.http://craftpip.github.io/jquery-confirm/ 2.http://www.bootcdn.cn/jquery-confirm/readme/ 3.h ...
- 【百度地图API】——国内首款团购网站的地图插件
原文:[百度地图API]--国内首款团购网站的地图插件 摘要: 本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站.使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在 ...
- 【Jenkins】使用 Jenkins REST API 配合清华大学镜像站更新 Jenkins 插件
自从去年用上了 Jenkins 进行 CI/CD 之后,工作效率高了不少,摸鱼的时间更多了.不过 Jenkins 好是好,但在功夫网的影响下,插件就是经常更新不成功的,就像下面这样子: 查了不少资料, ...
- 我的wordpress插件总结
酷壳(CoolShell.cn)WordPress的插件 注意: 下面的这些插件的链接是其插件主页的链接,你可以在WordPress后台管理中添加插件时直接搜索安装就可以了. 插件不是越多越好.WP的 ...
- Chrome 67 以后版本无法离线安装crx插件
原文链接:https://blog.csdn.net/wanwuguicang/article/details/80716178 升级了Chrome后无法离线安装扩展 如图: 谷歌自Chrome 67 ...
- 拿wordpress站的一个小技巧
记得09年时wp爆过一个重置管理口令的漏洞, 现在用法差不多, 也是我刚刚发现, 网上也没找到有讲述关于这个的. 前提:是在有注入点(注入点的话可以通过寻找插件漏洞获得.), 密码解不开, 无法out ...
- 2020年B2B外贸建站的终极教程
本文目标:按照本建站教程的顺序操作,能够实现:基于全球份额最大的建站系统“wordpress”,从零搭建一个B2B外贸网站,且建站成本每年小于1000元(如果不计算自己投入的人力成本的话). 模板站点 ...
- vue自定义插件封装，实现简易的elementUi的Message和MessageBox
vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition ...
随机推荐
- linux vim 配置文件(高亮+自动缩进+行号+折叠+优化)
点评:将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)"===================== ...
- postgresql - mac 启动 关闭 postgresql
/Library/PostgreSQL/9.3/bin/pg_ctl -D /Library/PostgreSQL/9.3/data stop /Library/PostgreSQL/9.3/bin/ ...
- 【JavaScript学习笔记】画图
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var ...
- MatrixTurn源码阅读
在看cacheAsBitmap 相关资料时,找到bit101的一篇文章,http://www.bytearray.org/?p=290 全文如下: One of the feature I would ...
- Android fragment源码全解析
Fragment 相信基本上每个android developer都用过,但是知晓其原理 用的好的还是不多,今天就从源码的角度上来带着大家分析一下Fragment的源码,对fragment有了更深层次 ...
- 【转】IPC-消息队列
一. 概念 消息队列就是一个消息的链表.对消息队列有写权限的进程可以向其中按照一定的规则添加新消息:对消息队列有读权限的进程可以从消息队列中读出消息.消息队列是随内核持续的.下面介绍三个概念: ...
- iostat的深入理解
问题背景 iostat -xdm 1 通常用来查看机器磁盘IO的性能. 我们一般会有个经验值,比如,ioutil要小于80%, svctm要小于2ms. 前几天碰到一个奇怪的现象:有一台SSD机器,磁 ...
- XRPictureBox z
XRPictureBox 大小加入是40x40 我绑定的图片好比是60X50 , 在不自己写代码的情况下,XRPictureBox 有没有什么属性可以调整,比如像SizeMode那种? // Set ...
- Linux 下部署单机 hadoop 测试
最终运行结果展示: 格式化namenode. 开始测试 显示测试进程 浏览器查看效果展示:(虽然还不清楚是什么意思,但是能看到这个效果已经很开心了) 话不多说,进入主题: 1. 安装 VMwareSt ...
- 1005acm罚时
ACM国际大学生程序设计竞赛是由国际计算机学会主办的,一项旨在展示大学生创新能力.团队精神和在压力下编写程序.分析和解决问题能力的年度竞赛.参赛队伍最多由三名参赛队员组成,竞赛中一般命题10-13题, ...