gpt4 book ai didi

jquery - 自定义 Bootstrap 箱

转载 作者:行者123 更新时间:2023-12-03 22:50:49 29 4
gpt4 key购买 nike

我正在尝试自定义 Bootstrap 箱设计。我已成功获得如下所示的输出: enter image description here

这是我的代码

        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 设置一个公共(public)类,然后尝试发出警报,但 init 现在不起作用。有没有办法可以在 bootbox.setDefaults 之后设置 init 函数所以我只是每次都简单地调用 bootbox.alert() 。不是整个代码。

最佳答案

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

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

希望对你有帮助。

关于jquery - 自定义 Bootstrap 箱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45435022/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com