jQuery基于函数重载实现自定义Alert函数样式的方法


Posted in Javascript onJuly 27, 2016

本文实例讲述了jQuery基于函数重载实现自定义Alert函数样式的方法。分享给大家供大家参考,具体如下:

(function(){
window.alert = function(text) {
 text=text.toString().replace(/\\/g,'\\').replace(/\n/g,'<br />').replace(/\r/g,'<br />'); //解析alert内容中的换行符
 var alertdiv='<div id="alertdiv" style="position:absolute; display:none ; overflow:hidden; padding:10px 10px 8px; top: 50%; left: 50%; text-align:center; line-height:22px; background-color:#DDE4EE; border:1px solid #ccc">'+text+'<br /><input type="submit" name="button" id="button" value="确定" style="margin-top:8px;" onclick="$(this).parent().remove(); "/></div>'; //自定义div弹窗
 $(document.body).append(alertdiv); //动态加载div
 $("#alertdiv").css({"margin-left":$("#alertdiv").width()/2*(-1)-20,"margin-top":$("#alertdiv").height()/2*(-1)-20}); //设置偏移数值,实现div居中
 $("#alertdiv").show(); //显示
};
})();

注:以上代码可自适应alert内容长度,支持换行符,调用时与原始alert函数无异。

完整示例代码如下:

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
(function(){
window.alert = function(text) {
 text=text.toString().replace(/\\/g,'\\').replace(/\n/g,'<br />').replace(/\r/g,'<br />'); //解析alert内容中的换行符
 var alertdiv='<div id="alertdiv" style="position:absolute; display:none ; overflow:hidden; padding:10px 10px 8px; top: 50%; left: 50%; text-align:center; line-height:22px; background-color:#DDE4EE; border:1px solid #ccc">'+text+'<br /><input type="submit" name="button" id="button" value="确定" style="margin-top:8px;" onclick="$(this).parent().remove(); "/></div>'; //自定义div弹窗
 $(document.body).append(alertdiv); //动态加载div
 $("#alertdiv").css({"margin-left":$("#alertdiv").width()/2*(-1)-20,"margin-top":$("#alertdiv").height()/2*(-1)-20}); //设置偏移数值,实现div居中
 $("#alertdiv").show(); //显示
};
})();
</script><input type="submit" name="button" id="button" value="点击弹出alert自定义窗口" onclick='alert("这是alert弹窗\n支持\\n换行符")'/>

运行效果截图如下:

jQuery基于函数重载实现自定义Alert函数样式的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS控制层作圆周运动的方法
Jun 20 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
JS实现可视化文件上传
Sep 08 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 #Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 #Javascript
js中遍历对象的属性和值的方法
Jul 27 #Javascript
js中的关联数组与普通数组详解
Jul 27 #Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 #Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 #Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
php 注释规范
2012/03/29 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python实现Youku视频批量下载功能
2017/03/14 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
在django模板中实现超链接配置
2019/08/21 Python
在python3中实现更新界面
2020/02/21 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Python打印不合法的文件名
2020/07/31 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
工程监理应届生求职信
2013/11/09 职场文书
小学生元旦感言
2014/02/26 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
离婚案件答辩状
2015/05/22 职场文书