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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
js确定对象类型方法
Mar 30 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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 采集程序原理分析篇
2010/03/05 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
实现jquery放大镜的两种方法
2018/02/22 jQuery
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
用Python编写web API的教程
2015/04/30 Python
Django URL传递参数的方法总结
2016/08/28 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
高效使用Python字典的清单
2018/04/04 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
七一表彰活动方案
2014/01/18 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
涨价通知
2015/04/23 职场文书
介绍信格式样本
2015/05/05 职场文书