JavaScript 和 jQuery $.alert alert $.confirm confirm 的对比

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/