JS~重写alter与confirm，让它们变成fancybox风格

插件与系统命令

对于很多JS弹框插件来说，都提供了alter,confirm等功能，如fancybox,Boxy等插件，今天来介绍一下如何将系统的alter和confirm替换成指定插件的alter和confirm，使用替换的方式的好处就是不用修改之前的代码，这在面向对象里，

叫做“对修改关闭，对扩展开放”，也称为OCP原则，即开闭原则。

fancybox替换系统命令，它需要有一个HTML容器来展现弹框

<script id="MessageBox_delete" type="text/html"><!--试题删除确认弹出框 start--><div class="r_warnBox" style="width: 276px;"><div class="r_warnBox_tit"><h3><strong>提示</strong></h3></div><div class="r_roomBoxContDel"><p class="alert">您确定删除作业吗？</p><p class="confirm"><a class="sure" href="javascript:;">确定</a><a class="cancel" href="javascript:;" οnclick="$.fancybox.close();">取消</a></p></div><a class="r_warnBox_close" href="javascript:;" onclick="$.fancybox.close();"></a></div><!--试题删除确认弹出框 end-->
</script>
<!--弹出框1 start-->
<script id="MessageBox_message" type="text/html"><div class='r_warnBox' style='width: 433px; padding-right: 30px;'><div class='r_warnBox_tit'><h3><strong>提示</strong></h3></div><div id='alert_message' class='r_roomBoxCont'><p class='alert'>[Content]</p></div><a class='r_warnBox_close' href='javascript:;' onclick="$.fancybox.close()"></a></div>
</script>
<!--弹出框1 end-->

下面是复写语句

 window.alert = function (msg) {var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。var html = document.getElementById("MessageBox_message").innerHTML;var result = html.replace(reg, function (node, key) { return { 'Content': msg }[key]; });$.fancybox(result, {'padding': 0,'scrolling': 'visible','closeBtn': false,'modal': false});}window.confirm = function (msg, callBack) {$.fancybox($("#MessageBox_delete").html(), {'padding': 0,'scrolling': 'visible','closeBtn': false,'modal': false,afterShow: function () {$('p.confirm a.sure').on('click', function () {callBack();});}});}

下面是调用语句

function alerttest() {alert("ok");}function confirmtest() {confirm("are you sure!", function () { alert("删除成功") });}

Boxy替换系统命令，使用相对简单，它已经为我们创建的弹框的DIV

window.alert = function (msg) {Boxy.alert(msg);
}window.alert = function (msg,callback) {Boxy.confirm(msg,callback);
}

调用和fancybox也是一样的

  function alerttest() {alert("ok");}function confirmtest() {confirm("are you sure!", function () { alert("删除成功") });}

最后运行效果如图

转载于:https://www.cnblogs.com/lori/p/3586075.html

JS~重写alter与confirm，让它们变成fancybox风格相关推荐

JS重写提示框(confirm)
<script language="javascript"> /** * 功能:显示提示窗口 * 作者:申楠 qq:38371354 email:amushen1@ya ...
WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调增加加载进度条支持JS中alert.confirm.prompt Safari调试设置 -> safari --> 高级,开启J ...
html怎么在alert中加标题,js重写alert事件（避免alert弹框标题出现网址）
js代码: window.alert = function(msg, callback) { var div = document.createElement("div"); di ...
php confirm函数,JS中确认框confirm()的使用总结
JS中确认框confirm()的使用总结 1.confirm()函数中的参数是确认框的提示语. 2.此函数返回值是布尔型的,点击确定,返回值为true,点击取消返回值为false. ex1:删除单条信 ...
cefsharp重写默认js弹窗（alert/confirm/prompt）
1.设置js弹窗控制器 webView.JsDialogHandler = this; //js弹窗控制 this表示本类对象,所以本类要实现IJsDialogHandler接口 2.实现IJsDi ...
android拦截js弹窗,C++ 拦截 CEF 的JS 弹窗（Alert, Confirm）,改造为C++的对话框
本周主要进行了oa_web项目的统一对话框(提示框)进行改造.因为我们知道,对于嵌入到客户端的web页面,会使用JS弹出的alert,confirm 对话(提示)框, 不过这个提示框的样式是由浏览器决 ...
js的alert和confirm美化
转载:http://www.cnblogs.com/kewei/p/4423112.html --前言-- window对象的alert和confirm标准方法在不同浏览器的显示效果不太相同,有个相同 ...
js重写console.log函数
重写console.log函数在前端开发中console.log是我们必不可少的调试工具,但是原生的console.log有两点不能很好地满足我们的需求开发时需要log,但是上线时希望去掉log, ...
javascript 重写alert、confirm、prompt 等提示宽框
基于浏览器的提示太丑了,易U开发了各种提示主要包括: alert,error,success,notice,confirm,prompt 等方法 demo:http://www.yxsss.com/u ...