个性化定制Bootbox

Question

个性化定制Bootbox

5

我正在尝试自定义bootbox的设计。我已经成功地获得了以下显示输出：

这里是我的代码：

        var dialog = bootbox.alert({
    closeButton: false,
         title: false,
         message: 'hello',
         className: "my-popup"
      });
      dialog.init(function(){
var message = $(".my-popup").find(".bootbox-body");
$(".my-popup").find(".modal-footer").prepend(message);
$(".my-popup").find(".modal-footer div").css({"display":"inline-block", "padding-right":"10px", "color":"#f7f7f7"});
 $(".my-popup").find(".modal-body").remove();    
});

这段代码很有效，但我页面上还有其他一些警报需要显示，我也想像这样展示它们。因此，我尝试缩小上述代码或设置共同属性以便使用bootbox，但此后我的init函数停止工作。

这是fiddle链接。我正在使用bootbox.setDefaults来设置常见类，然后尝试给出警报，但init现在不起作用了。是否有一种方法可以在bootbox.setDefaults之后设置init函数，所以每次我只需简单地调用bootbox.alert()。而不是整个代码。

- Atal Shrivastava

请检查 message 变量。它是空的。 - Huy Nguyen

根据我的代码，message变量中包含一个div，其中包含消息。我将其放在modal-footer中。根据boot box，消息出现在modal-body中，但我正在尝试将消息放在modal-footer中。 - Atal Shrivastava

我检查了 $(".my-popup").find(".bootbox-body").length==0。它的意思是 message 变量中没有 div。 - Huy Nguyen

2个回答

2

试试这段代码

var dialog = bootbox.alert('hello').addClass('my-popup');

bootbox.setDefaults 设置 bootbox 对话框中显示的许多默认选项。但是，在调用 bootbox 对话框时，这里的默认选项 ('className') 会被覆盖。

为了保留默认值，您可以链接一个 jQuery 调用

bootbox.alert('hello').addClass('my-popup');

DEMO

- Amal

这是一个简单的验证提示。在不同的条件下它必须工作。我可以在工作中得到这个，但我的代码对于一个警报来说相当长。例如，有名字、姓氏、出生日期等字段，我不能每次都写9-10行代码来进行警报。因为我的弹出类并没有做所有的事情，Init方法将消息从modal-body放到modal-footer中。 - Atal Shrivastava

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Mac · Accepted Answer

请查看下面提到的解决方案。

$(document).ready(function() {
  bootbox.setDefaults({
      closeButton: false,
      title: false,
      className: 'my-popup'
  });
  dialog.init(function() {
      var message = $(".bootbox.modal").find(".bootbox-body");
      $(".bootbox.modal").find(".modal-body").remove();
      $(".bootbox.modal").find(".modal-footer").prepend(message);
      $(".bootbox.modal").find(".modal-footer div").css({"display": "inline-block", "padding-right": "10px", "color": "#f7f7f7"});
  });
});
var dialog = bootbox.alert('Hello World!');

.new-container {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  display:none;
}

.new-container h2, .modal-content {
  font-size: 1.5em;
  position: relative;
  background: #ff4d4d !important;
  padding: .3em;
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: Baskerville;
  font-style: italic;
}

.new-container h2:before, .modal-content:before, .new-container h2:after, .modal-content:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1em solid #ff4d4d;
  z-index: -1; 
}

.new-container h2:before, .modal-content:before {
  left: -1em;
  border-right-width: 1em;
  border-right-color: #a51414;
  border-left-color: transparent;
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: none;
}
.new-container h2:after, .modal-content:after {
  right: -1em;
  border-left-width: 1em;
  border-left-color: #a51414;
  border-right-color: transparent;
  -moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3);
}

.modal-footer{
  padding:10px;
  border-top: none !important;
  text-align:center;
}
.my-popup .modal-body{
   padding: 10px;
   color:#f7f7f7;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

我希望这能对你有所帮助。