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://craftpip.github.io/jquery-confirm/