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/