Javascript 如何将twitter引导模式设置得更宽更高？

如何将twitter引导模式设置得更宽更高

此处示例（请单击：启动演示模式）：

如果您的模式id为“myModal”

您可以尝试添加以下样式：

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}

使用CSS：

.modal {
    width: 900px;
    margin-left: -450px; // half of the width
}

---

在css文件中，添加新的类定义：

.higherWider {
    width:970px;
    margin-top:-250px;
}

在HTML中，在模式的类字符串中添加

higherWider

：

<div class="modal hide fade higherWider">

---

对于以%为单位的大小，可以执行以下操作：

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}

此外，他们还增加了

modal lg

和

modal sm

类。您可以像查询一样使用

@media

查询来控制

模式

大小。这是控制<代码>模式大小的一种更全局的方法

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
        height: 900px; /* control height here */
    }
}

示例代码：

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

大模态
...
小模态
...

以下任一解决方案对我有效：

将

style=“width:50%；height:50%；”

应用到模式部分的

div

，使用

class=“modal dialog”

类似这样

<div class="modal-dialog" style="width: 50%; height:50%;">

---

最简单的方法是使用.modal lg。将其添加到模态容器内的模态对话框类，如下所示：

<div class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                I am now wider!
            </div>
    </div>
</div>

我现在变宽了！

改变类模型对话框帮了我的忙

.modal-dialog {
    width: 90%;
}

---

被接受的答案很有效，但是我建议使用填充而不是边距。这样，当您在模式对话框外单击时，可以保留“取消”功能

#myModal {
    width: 700px; 
    padding-top: -300px !important;
    padding-left: -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}

css:

代码：

模态标题
&时代；
情态体。。
接近

以下操作不需要视口断点，也适用于较旧的引导模式：

#myModal{
   position: fixed;
   left: 10% !important;
   right: 10% !important;
   top: 10% !important;
   width: 80% !important;
   margin: 0 !important;
}

---

yyMyMaldie:style＝“宽度：700 px；空白：-250px 0 0 -525px”；“TabDe=＝-1”和.MyType：style =“Max Health:525px”；如何在屏幕中间设置我的模态？（现在位于左侧）已更新！计算大约一半的宽度。。。边距：-300px 0px 0px-350px。这很好，只是你需要在CSS中的媒体查询后放上括号。您好，为什么不直接针对类。模态对话框？但是可能

modal lg

可以添加到带有类

modal

的div中，而不是

modal dialog

？因为，我使用的是Bootstrap 3.3.5，只有当我将

modal lg

添加到

div.modal

时，我才会自动获得更大的模态（无需额外的样式）。@BohdanKuts请再次检查。我不相信页边距顶部是解决方案，可能是您将页边距左侧放错了位置否，页边距顶部定义会将页面上的元素移得更高，如将类命名为“higherWider”所示。

.modal-lg, .modal-sm {
    min-width: 90%;
}

<!-- The Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

#myModal{
   position: fixed;
   left: 10% !important;
   right: 10% !important;
   top: 10% !important;
   width: 80% !important;
   margin: 0 !important;
}