Question

Bootstrap的模态弹出窗口一直出现在后台。尝试申请：

Bootstrap Modal sitting behind backdrop

似乎没有用。我想，也许是因为它在侧边栏里面。页面其余部分的内容通过include（）调用。模态似乎适用于include（）层。

<div class="nav nav-sidebar">
<input type='button' value='SURVEY!' class='btn btn-md btn-primary' data-toggle='modal' data-target='#modal'>
<!--Your Modal Body Here -->
<div class='modal fade' id='modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
          <!--Your Modal Close Button-->
          <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
          <!--Your Modal Title-->
        <h4 class='modal-title' id='myModalLabel'>Please Confirm Action</h4>
      </div>
      <div class='modal-body'>
        <!--Your Modal content here-->
        <p>Are you sure you want to proceed with your action ?</p>
      </div>
      <div class='modal-footer'>
       <a href='home.php'><button type='button' class='btn btn-primary'>Yes I Do</button></a>
      </div>
    </div>
  </div>
</div>
</div>

我想让它在前层工作，看它应该如何。有没有解决这个问题？

修改边栏类

.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 30px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto; 
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

Answer 1

@Dexter：在Bootstrap Modal sitting behind backdrop中已经提到过＆＃34;将整个模式移到你的代码的其余部分之外，直到＃34;。你试过以下代码吗？

<body>
    <div class="nav nav-sidebar">
    <input type='button' value='SURVEY!' class='btn btn-md btn-primary' data-toggle='modal' data-target='#modal'>

    </div>

    <!--Your Modal Body Here -->
    <div class='modal fade' id='modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
      <div class='modal-dialog'>
        <div class='modal-content'>
          <div class='modal-header'>
              <!--Your Modal Close Button-->
              <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
              <!--Your Modal Title-->
            <h4 class='modal-title' id='myModalLabel'>Please Confirm Action</h4>
          </div>
          <div class='modal-body'>
            <!--Your Modal content here-->
            <p>Are you sure you want to proceed with your action ?</p>
          </div>
          <div class='modal-footer'>
           <a href='home.php'><button type='button' class='btn btn-primary'>Yes I Do</button></a>
          </div>
        </div>
      </div>
    </div>
</body>

Bootstrap模态小狗在边栏上坐在背后

1 个答案: