我已经创建了 Bootstrap 模式,并通过 AJAX 附加了一些 html...
我无法根据内容显示完美的宽度。我试过:
width: 'auto'; //it looks as in Screenshot
width: 100%; //it takes whole page width
看起来像:
var PopupHelper = {
Show: function () {
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html(data);
$('#popup-Model').css({ 'width' : 'auto','overflow': 'auto' });
$("#popup-Model").modal();
}
qAjax.Init();
}
}
<!--Popup Window -->
<div class="modal fade" id="popup-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body" id="popup_content">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
如何根据 modal-body
中的内容设置模态宽度?
NOTE: modal HTML shown in image can vary
谢谢!!!
最佳答案
由于您已经在使用 javascript 来呈现此模式,因此将 modal-dialog
宽度设置为与您的内容相同的宽度会更容易。仅使用 CSS 很难做到这一点,因为 modal-dialog
具有固定宽度(因屏幕尺寸而异)。
$("#popup_content").html(data);
$("#popup-Model").modal();
setTimeout(() => {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 30; //Padding
$(".modal .modal-dialog").css({ 'width' : width+'px' });
}, 0); //Maybe you'll need a longer timeout because of css transitions
在 OP 案例中担任:
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html('<div class="test-div">' + data + '</div>');
$("#popup-Model").modal();
setTimeout(function () {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 50; //padding
$(".modal-dialog").css({ 'width': width + 'px' });
$('#popup-Model').css({ 'overflow': 'auto' });
}, 500);
关于javascript - 根据内容使用动态宽度的 Bootstrap 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40992615/