Bootstrap 模态弹出窗口在 ASP.NET 中显示为双层，并在弹出窗口时移动内容答案

【问题标题】：Bootstrap Modal Popup display as double layer in ASP.NET and shifts content when popupsBootstrap 模态弹出窗口在 ASP.NET 中显示为双层，并在弹出窗口时移动内容
【发布时间】：2014-03-28 19:35:55
【问题描述】：

我以前从未体验过 Bootstrap 模式弹出窗口。但在最近一次完全基于引导程序的主题购买中，他们也演示了模态弹出窗口，这在他们的 HTML 页面上完美运行。但是当我集成到我的母版页中时，一切正常。但是模态弹出窗口单独显示为双倍，如下图所示

我不明白为什么当 HTML 页面和 ASPX 页面中的所有内容都相同时它的行为会如此。同样，当模态弹出窗口显示时，页面上会发生类似变化的事情，或者当模态弹出窗口出现时会向右小跳。

这是我的模态弹出代码

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

这是按钮代码

 <button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
    <i class="fa fa-copy"></i>| Clone Data
 </button>

【问题讨论】：

标签： asp.net twitter-bootstrap-3 master-pages bootstrap-modal

【解决方案1】：

对于那个跳跃，编辑它的 CSS

body.modal-open{
  overflow: visible !important;
}

【讨论】：

感谢朋友，解决了我的移位问题。但是您知道为什么要使用双框模态吗？

【解决方案2】：

横向移动是a known open bug in Bootstrap.
假设你的模态框不够长，需要滚动，你可以试试this supposed workaround：

.modal {
  overflow-y: auto;
}

.modal-open {
  overflow: auto;
}

【讨论】：