自动弹出与动态宽度按内容

我已经创建引导模态，并通过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">&times;</button> 
 
     </div> 
 
     <div class="modal-body" id="popup_content"> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!--Popup Window -->

如何进行模态宽度，按照内部modal-body的内容？

注：在图像中显示的模态HTML可以变化

谢谢！

来源

2016-12-06 Vikrant

既然你已经在使用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

working example

曾在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);

来源

2016-12-06 10:40:00

不知何故$（“＃popup_content：第一个孩子”）。宽度（）;返回'空' – Vikrant

你试图把它在一个setTimeout？另外，我认为你应该在调用'modal'函数后做。我编辑了我的答案。 –

是的，我用'SetTimeout'试了一下，然后发表我的评论 – Vikrant

添加行和同事*班级在弹出来处理内容

<!--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">&times;</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 -->

来源

2016-12-06 10:08:21

外观仍然没有变化.. – Vikrant

从你的ajax中删除所有宽度返回的HTML如果你给定宽度，将当然超出宽度或使用模态-g显示大模态 –

我试过兄弟，仍然不工作:( – Vikrant

尝试使用最小宽度和位置：相对于样式“模型体”类。我希望它能起作用。

来源

2016-12-06 11:53:15

不行，它不起作用 – Vikrant

自动弹出与动态宽度按内容

回答

相关问题