[英]Bootstrap Popup with Dynamic Width as per content
我創建了引導程序模態,並通過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
的內容制作模態寬度?
注意:圖像中顯示的模式HTML可能會有所不同
謝謝!!!
在彈出窗口中添加row和col- *類以處理內容
<!--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">
<div class="col-xs-12" id="popup_content"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
由於您已經在使用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);
嘗試對“模型主體”類使用最小寬度和位置:相對樣式。 我希望它能起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.