代码之家 › 专栏 › 技术社区 › Ahmad Badpey

在bootbox bootstrap jquery插件中向警报对话框添加自定义类

bootbox twitter-bootstrap jquery javascript

Ahmad Badpey · 技术社区 · 9 年前

我正在使用 Bootbox jquery plugin 以显示模态。

这是显示警报对话框的简单用法:

bootbox.alert({
     title: 'Message Title',
     message: "this is message Body"
});

此插件具有 className 用于添加自定义类以应用于由创建的对话框包装的选项 dialog() 方法,但我们不能将其用于 alert() 方法

向添加自定义类的方法 警报() 正在使用 对话框() 创建这些。但在这种情况下,我们必须创建如下按钮好啊 (或取消在里面 prompt() 方法),每次我们想要一个耗时的简单警报时,都手动执行,如下所示:

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    }
});

有没有办法通过将自定义类添加到警报框中 警报() 方法

1 回复 | 直到 9 年前

squaleLis 9 年前

好消息!您可以设置 className 还带有警报(查看片段)。

$(window).ready(function(){
  bootbox.alert({
     title: 'Message Title',
     message: "this is message Body",
     className: "my-popup"
  });
});

$(window).ready(function(){
  bootbox.alert({
     title: 'Message Title',
     message: "this is message Body",
     className: "my-popup"
  });
});

.my-popup .modal-content {
  background: #FAEBD7;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前