Question

我在bootswatch中应用了“Spacelab”主题，现在网页不会在弹出窗口后面淡出。

视图中的代码：

<body>

<a type="button" class="btn btn-primary" href="#article-editor1" data-toggle="modal">Add Building</a>

<div class="modal fade" id="article-editor1" draggable="true" aria-hidden="true">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h4>Building Information</h4>
    </div>
    <div class="modal-body">
        <table>
            <tr>
                <td id="tesing">Building Name: </td>
                <td id="tesing">@Html.TextBoxFor(x => x.siteName)</td>
            </tr>
            <tr>
                <td id="tesing">Building Size:</td>
                <td id="tesing">@Html.TextBoxFor(x => x.siteSize)</td>
            </tr>
            <tr>
                <td id="tesing">Zipcode: </td>
                <td id="tesing">@Html.TextBoxFor(x => x.siteZip)</td>
            </tr>
            <tr>
                <td id="tesing">Cooling Setpoint:</td>
                <td id="tesing">@Html.TextBoxFor(x => x.siteOccClg)</td>
            </tr>
            <tr>
                <td id="tesing">Heating Setpoint:</td>
                <td id="tesing">@Html.TextBoxFor(x => x.siteOccHtg)</td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save Changes</a>
    </div>
</div>

css中的代码：

.modal-backdrop.fade {
  filter: alpha(opacity=0);

  opacity: 0;
}
.modal-backdrop.fade.in {
  filter: alpha(opacity=50);
  opacity: 0.5;
}

我比较了模态＆amp;将部分淡入原始的bootsrap CSS文件，发现没有差异。

Answer 1

找到我自己的问题。主题使用的boostrap版本将背景设置为“0”高度见杜布格：

 // Modal background
 .modal-backdrop {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;

所以我编辑了CSS以注释掉“top”属性并添加了100％的height属性，如下所示：

.modal-backdrop {
  position: absolute;
  /*top: 0;*/
  right: 0;
  left: 0;
  background-color: #b94a48;
  opacity: 0.5;
  height:100% /*Add This*/
}

应用bootswatch主题后，模态不会褪色

1 个答案: