Asp.net mvc 4 应用引导样例主题后模式不褪色_Asp.net Mvc 4_Bootstrap Modal

Asp.net mvc 4 应用引导样例主题后模式不褪色

asp.net-mvc-4

Asp.net mvc 4 应用引导样例主题后模式不褪色,asp.net-mvc-4,bootstrap-modal,Asp.net Mvc 4,Bootstrap Modal,我应用了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-h

我应用了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>

我将模态和淡入淡出部分与原始bootsrap CSS文件进行了比较，没有发现任何差异

发现了我自己的问题。该主题使用的boostrap版本将背景设置为0高度见Dubug：

 // 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*/
}

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