具有动态宽度的Bootstrap弹出窗口

Question

我已经创建了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">&times;</button>
      </div>
      <div class="modal-body" id="popup_content">
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!--Popup Window -->

如何根据modal-body内的内容制作模态宽度？

  

注意：图像中显示的模态HTML可能会有所不同

感谢!!!

Answer 1

由于您已经使用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);

Answer 2

在弹出窗口中添加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">&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 -->

Answer 3

尝试将 min-width 和 position：relative 样式用于＆＃34; model-body＆＃34; 类。我希望它能奏效。