浅谈javascript alert和confirm的美化


Posted in Javascript onDecember 15, 2016

--前言--

window对象的alert和confirm标准方法在不同浏览器的显示效果不太相同,有个相同点是都不是很美观。我们的想法是使用js和css分别仿照它们,提供另一套函数,使在不同浏览器的有着相同的体验效果。

 --设计思路--

为了保留原有的alert和confirm方法,我们不直接替换window对象的alert和confirm,而是新建一个win对象,该对象下有alert、confirm、open、close等。win.alert等的对话框弹出层,使用iframe作底层,确保对话框在ie7以下版本时也能把select标签覆盖在底下,这些对话框在弹出之后,是不会阻塞脚本运行的,所以win.alert等函数都提供一个回调参数,在对话框关闭或选择之后触发这个回调参数,函数原型如下:

win.alert = function (title, message, closed) { ...} // alert
win.confirm = function (title, message, selected) {...} // confirm
win.open = function (width, height, title, url, closed) {...} // 弹出页面对话框

--成果展示--

浅谈javascript alert和confirm的美化

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 #Javascript
原生JS实现图片轮播切换效果
Dec 15 #Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 #Javascript
jQuery中的100个技巧汇总
Dec 15 #Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 #Javascript
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
关于Python的一些学习总结
2018/05/25 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
django表单的Widgets使用详解
2019/07/22 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
PHP面试题大全
2015/10/16 面试题
大学生入党自我鉴定
2013/10/31 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
就业自我评价
2014/02/04 职场文书
《口技》教学反思
2014/02/21 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2014年环保工作总结
2014/11/26 职场文书
教师个人自我评价
2015/03/04 职场文书
《我的长生果》教学反思
2016/02/20 职场文书