Bootstrap confirm确认对话框

3

alert和confirm是很多项目中需要使用的,在Bootstrap框架下可以使用Modal模拟框做出比较漂亮的提示或者确认对话框,使得整体风格更加一致,原因还是代码复用率很高,今天写一段可以通用的代码,这样就不用每次都手动码···

bootstrap-confirm

需要先加载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>

共 3 条评论

  1. 回复

    文章不错非常喜欢

  2. 回复

    博主的主题挺好看的。

  3. 回复

    特来拜访一下博主

回复 今天头条 X

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...