如何根据内容动态调整Twitter Bootstrap模式的大小

问题描述 投票:90回答:14

我有数据库内容,有不同类型的数据,如Youtube视频,Vimeo视频,文本,Imgur图片等。所有这些都有不同的高度和宽度。我在搜索互联网时发现的只是将大小改为一个参数。它必须与弹出窗口中的内容相同。

这是我的HTML代码。我还使用Ajax来调用内容。

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 
javascript jquery html css twitter-bootstrap
14个回答
105
投票

由于您的内容必须是动态的,您可以在模态的show事件上动态设置模态的css属性,该事件将重新调整模态的大小,覆盖其默认规范。原因是bootstrap使用css规则将max-height应用于模态体,如下所示:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

因此,您可以使用jquery css方法动态添加内联样式:

对于较新版本的bootstrap,请使用show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

对于旧版本的bootstrap,请使用show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

或使用css规则覆盖:

.autoModal.modal .modal-body{
    max-height: 100%;
}

并将此类autoModal添加到目标模态。

在小提琴中动态更改内容,您将看到相应调整大小的模式。 Demo

较新版本的bootstrap可以看到可用的event names

  • show.bs.modal调用show实例方法时会立即触发此事件。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。
  • shown.bs.modal当模块对用户可见时将触发此事件(将等待CSS过渡完成)。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。
  • hide.bs.modal在调用hide实例方法时立即触发此事件。
  • hidden.bs.modal当模态完成对用户的隐藏时将触发此事件(将等待CSS转换完成)​​。
  • loaded.bs.modal当模态使用remote选项加载内容时会触发此事件。

支持较旧版本的bootstrap modal events

  • Show - 调用show实例方法时立即触发此事件。
  • 显示 - 当模态对用户可见时将触发此事件(将等待css转换完成)​​。
  • hide - 调用hide实例方法时立即触发此事件。
  • hidden - 当模态完成对用户的隐藏时将触发此事件(将等待css转换完成)​​。

0
投票

对于Bootstrap 2自动动态调整模型高度

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

0
投票

我有与bootstrap 3相同的问题,而且模态体div的高度不希望大于442px。这是在我的情况下修复它所需的所有css:

.modal-body {
    overflow-y: auto;
}

0
投票

Mine Solution只是添加了以下风格。 <div class="modal-body" style="clear: both;overflow: hidden;">


0
投票

在模态div上设置width:fit-content


0
投票

从Bootstrap 4开始 - 它的风格是:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

因此,如果您要将模态宽度调整为更宽的某个宽度,我建议您在css中使用此示例:

.modal-dialog { max-width: 87vw; }

请注意,设置qazxsw poi不会覆盖bootstrap qazxsw poi。


106
投票

这对我有用,上述都没有奏效。

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

22
投票

我无法让PSL的答案为我工作所以我发现我所要做的就是设置包含style="display: table;"的模态内容的div。模态内容本身表示它想要的大小和模态适应它。


8
投票

对于bootstrap 3使用像

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

6
投票

如果你想编写css然后添加以下内容,有很多方法可以做到这一点

.modal-dialog{
  display: table
}

如果您想添加内联

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

不要将display:table;添加到modal-content类。它完成了你的工作,但处理大尺寸的模态看下面的截图。如果向样式内容添加样式,则第一个图像是如果向样式对话框In case if you add style to modal-dialog添加样式。它看起来很好看。 enter image description here


5
投票

简单的Css为我工作

.modal-dialog { 
max-width : 100% ;
}

1
投票

如果您使用gijgo.com的jquery对话框插件并将宽度设置为auto,则可以这样做。

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

如果将resizable设置为true,也可以允许用户控制大小。您可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable上看到关于此的演示


1
投票

我只是覆盖了css:

.modal-dialog {
    max-width: 1000px;
}

1
投票

一个简单的CSS解决方案,将垂直和水平居中模式:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}
© www.soinside.com 2019 - 2024. All rights reserved.