alert和confirm是很多项目中需要使用的,在Bootstrap框架下可以使用Modal模拟框做出比较漂亮的提示或者确认对话框,使得整体风格更加一致,原因还是代码复用率很高,今天写一段可以通用的代码,这样就不用每次都手动码···
需要先加载Bootstrap
bootbox.js
JQuery
$(function(){ //别名(可选) $.alert = bootbox.alert; $.dialog = bootbox.dialog; $.confirm = bootbox.confirm; //语言 bootbox.setDefaults({locale: 'zh_CN'}); //确认对话框 $(document).on("click.bs.xiumu.data-api", ".btn-confirm", function(e) { if ($(e.target).is('a, button, input[type=submit]')) { e.preventDefault(); var $href = $(this).attr('href'); var $conf = {message: "您确定要执行该操作吗?",title: "操作确认", callback:function(result){if(result && $href !== undefined) self.location.href = $href;} } if ($(e.target).data('message')) {$conf.message = $(e.target).data('message'); }else if ($(e.target).hasClass('btn-danger')) { $conf.message = "您确定要删除吗,该操作不可逆。"; $conf.buttons={confirm:{label:'删除',className:'btn-danger'}}; }else if ($(e.target).hasClass('btn-success')) { $conf.buttons={confirm:{className:'btn-success'}}; } if ($(e.target).data('title')) $conf.title = $(e.target).data('title'); if ($(e.target).data('callback')) eval('$conf.callback=' + $(e.target).data('callback')); bootbox.confirm($conf); } }); //提示消息 $(document).on("click.bs.xiumu.data-api", ".btn-alert", function(e) { e.preventDefault(); bootbox.alert({ message: $(this).data('message'), title: $(this).data('title')}); }); }); |
用法示例
<button class="btn btn-info" onclick="$.alert('你的消息<b>内容</b>')">onclick</button> <button class="btn btn-info btn-alert" data-title="提示消息" data-message="消息内容">.btn-alert</button> <button class="btn btn-default btn-dialog" onclick='$.dialog({message: "<p><i class=\"fa fa-spin fa-spinner\"></i> Loading...</p>"})'>自定义弹窗</button> <button class="btn btn-default btn-confirm" data-message="您确定要执行该操作吗?" data-callback="function(){alert()}">确认对话框</button> <button class="btn btn-success btn-confirm" href="ok.html">确认</button> <a class="btn btn-danger btn-confirm" href="delete.html">删除</a> |
文章不错非常喜欢
博主的主题挺好看的。
特来拜访一下博主