为什么模式窗口在添加css代码后变得隐藏?(引导程序)


Why does modal window become hidden after adding css code? (Bootstrap)

我已经创建了模式窗口。你可以看到它在这里工作得很好。http://www.bootply.com/R3JfdhIPwu

现在我需要将页面分为两部分——左边和右边,右边将被固定。

 .right-main {
 position: fixed; 
 }

一旦我把这一行添加到css模式窗口中,它就被隐藏了:http://www.bootply.com/aYhMZ3fLlM

有人对它的解决方案,如何使它可见有想法吗?

只需将模态标记移动到.right-main外部即可。模态定位通常独立于DOM结构。我建议将它移到DOM的页脚,因为它不需要立即渲染。还要确保它没有嵌套在它可能继承样式的任何元素中(在本例中为.right-main)。

示例:http://www.bootply.com/QfzMfbTahn

<div class="right-main">
  <a class="clickable" style=" text-decoration: none; font-size:100px; border-bottom:2px dashed;" data-toggle="modal" data-target="#basicModal">Test</a>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>