js的alert和confirm美化

--前言--

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) {...} // 弹出页面对话框

--成果展示--

--相关下载--

win.js和例子

时间: 2024-10-10 01:46:10

js的alert和confirm美化的相关文章

JS alert()、confirm()、prompt()的区别

1.警告消息框alertalert 方法有一个参数,即希望对用户显示的文本字符串.该字符串不是 HTML 格式.该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说,用户必须先关闭该消息框然后才能继续进行操作. window.alert("欢迎!请按“确定”继续."); 2.确认消息框confirm 使用确认消息框可向用户问一个“是-或-否”问题,并且用户可以选择单击“确定”按钮或者单击“取消”按钮.confirm 方法的返回值为 true 或 fals

自己编写jQuery插件 之 模拟alert和confirm

啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: fun

JavaScript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()

第一种:alert()方法 alert()方法是这三种对话框中最容易使用的一种,她可以用来简单而明了地将alert()括号内的文本信息显示在对话框中,我们将它称为警示对话框,要显示的信息放置在括号内,该对话框上包含一个"确认"按钮,用户阅读完所显示的信息后,只需单击该按钮就可以关闭对话框.下面来看一个使用alert()方法的例子,代码如下所示: ? 1 2 3 4 5 6 7 8 9 <html> <head> <title>编写html页面<

selenium webdriver学习(七)------------如何处理alert、confirm、prompt对话框( 转)

selenium webdriver学习(七)------------如何处理alert.confirm.prompt对话框 博客分类: Selenium-webdriver alertpromptconfirmseleniumwebdriver alert.confirm.prompt这样的js对话框在selenium1.X时代也是难啃的骨头,常常要用autoit来帮助处理. 试用了一下selenium webdriver中处理这些对话框十分方便简洁.以下面html代码为例: Html代码  

jquery自定义对话框alert、confirm和prompt

jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样式.jQuery的提示框插件有很多种,每一款都是出自不同的高人之手,因此都比较有自己的特点,包括风格和使用方法等.效果体验:http://keleyi.com/keleyi/phtml/jqplug/ 英文版:http://keleyi.com/keleyi/phtml/jqplug/1.htm 这

Selenium-&gt;如何处理alert、confirm、prompt对话框

alert.confirm.prompt这样的js对话框在selenium1.X时代也是难啃的骨头,常常要用autoit来帮助处理.试用了一下selenium webdriver中处理这些对话框十分方便简洁.以下面html代码为例: Dialogs.html <html> <head> <title>Alert</title> </head> <body> <input id = "alert" value

CSS模拟实现alert和confirm实现

由于原生的alert和confirm在不同手机上显示样式不一样,而且也难看.所以用css模拟了原生的alert和confirm实现. 具体代码如下: <!DOCTYPE html> <html> <head> <title>confirm和alert的demo</title> <meta charset="UTF-8"> <script src="jquery.min.js"><

模拟alert和confirm

啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: fun

自编jQuery插件实现模拟alert和confirm

现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了自己定制一个的想法...... 啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36