弹出框插件bootbox

xiaoxiao2021-02-28  96

bootbox:一个弹出框插件,官网看一下例子就好了:http://bootboxjs.com/examples.html

目前来说应该只要调用bootbox.js就可以了,没有css的问题

1.有最基本的调用就是

bootbox.alert("This is the default alert!");

就什么都不做,只要alert一下就已经完成了它的使命,要是只要实现这样的话我觉得完全没必要引入这个插件呀,只要自己alert一下不就好了

2.再加一步就是有回调函数了,callback

 这个好呀

bootbox.alert("This is an alert with a callback!", function(){ console.log('This was logged in the callback!'); });

你对这个弹出框执行了操作,就能做一些你想做的事

3.再深一步就是配置参数

  

bootbox.alert({ message: "This is an alert with a callback!", callback: function () { console.log('This was logged in the callback!'); } })

跟刚才一样的效果,但是我感觉看起来就会让人很舒服

4.不止是回调函数,还有可以定义弹出框的size

  

bootbox.alert({ message: "This is the small alert!", size: 'small' });

5.可以添加自定义的className

  

bootbox.alert({ message: "This is an alert with an additional class!", className: 'bb-alternate-modal' });

可以给那个大的div加自定义的类,然后你就可以随意给这个div实现各种css了

6.还有就是点击背景层的时候也可以触发这个弹出框

  

bootbox.alert({ message: "This alert can be dismissed by clicking on the background!", backdrop: true });

是的,就是这个backdrop参数,要是没有设置的话是点击背景层的话是没有反应的

7.还可以在弹出框添加你想要添加的按钮呀,然后利用回调函数来执行一些你想要执行的事

buttons: { "确定": { className: "btn-success", callback: function () { $(obj).parent().parent().find('input').val(selectedImage.id); $(obj).parent().parent().find('img').attr('src', selectedImage.url); selectedImage = {}; if (more) { var moreObj = $('#albumsClone').children().first().clone(); moreObj.find('input').val(''); moreObj.find('img').attr('src', './public/plug/dist/img/noimage.gif'); $('#albumsClone').append(moreObj); } } }, "取消": { className: "btn-default", callback: function () { } }, "删除": { className: "btn-danger", callback: function () { // var delUrl = URL + "Admin/File/delImage/id/" + selectedImage.id; // $.get(delUrl, function (data) { // var p = $('#dialog-imageUploader .pagination .current').text(); // var pagUrl = URL + "Admin/File/imageUploader/p/" + p; // $.ajax({ // url: pagUrl, // container: '.bootbox .bootbox-body', // push: false, // }); // }); // return false; } } }

这个是可以在弹出框上添加三个按钮,你分别点击这三个按钮的时候可以在每个按钮上添加一个回调函数,

这样你点击的时候就会做出相应的反应

 

转载请注明原文地址: https://www.6miu.com/read-81949.html

最新回复(0)