JavaScript 和 jQuery 弹窗对比
javascript 的三种弹框对象隶属于window对象,并且都会阻塞当前事件和脚本,直到用户操作完成才会继续执行后续事件和脚本.不能使用html元素.
jQuery(jquery-confirm插件) jQuery的弹出窗口是通过html元素和一些js事件模拟出来的,隶属于document对象,而且不能够阻塞其他的事件和脚本执行.
例:
jQuery 脚本
脚本1:
var $confirm= $.confirm('是否继续?'); //执行后返回当前弹窗的jQuery对象
location.reload()
这个脚本,并不会等待用户点击确定后,才继续执行下面的重载操作.
$.confirm只是生成了一个新的html元素,用css控制展现出了弹窗效果.
然后在确定和取消按钮上绑定了js事件,用户点击时触发回调函数.
此时$.confirm的任务已经完成了,并不会等到用户点击了确认或者取消按钮后才执行后续操作.
这种情况,后面的语句当然会继续执行,所以页面会直接刷新,不会去等待用户操作.
脚本2:
把需要确定后才能执行的操作,放到到弹窗的回调函数中,来防止用户没有操作时页面就被刷新
$.confirm({
title: '我是标题',
content: '是否继续?',
buttons: {
confirm: function () {
location.reload()
},
cancel: function () {
$.alert('Canceled!');
}
}
});
JavaScript脚本
var ret=confirm('是否继续?'); //返回true或者false
location.reload()
confirm属于window对象,可以阻塞当前页面,直到用户点击确认或者取消按钮时,当前页面才会刷新.
JavaScript的几种弹窗
不能使用html元素定制页面展示.
警告消息框 (alert)
弹出提示消息.
确认消息框 (confirm)
弹出一个消息,点击确认返回true点击取消返回false
提示消息框 (prompt)
弹出输入框,点击确认返回输入框内内容,点击取消返回null值
jQuery jquery-confirm
可以使用html元素定制弹窗展示,可以使用回调函数.
把所有的脚本操作放入回调函数内,可以防止例子中的页面被刷新.
转载于:https://blog.51cto.com/quxf2012/1872114