定製bootbox

Question

我正在嘗試定製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 所以我只是簡單地每次調用bootbox.alert()。不是整個代碼。

Answer 1

試試這個代碼

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

---

bootbox.setDefaults設置許多在bootbox dialog.But這裏的默認值（ '的className'）中的默認選項得到調用bootbox對話框時覆蓋。

要保留默認值，你可以鏈接一個jQuery調用

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

DEMO

Answer 2

請查看下文提到的解決方案。

$(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>

我希望這會幫助你。