如果其父容器的位置设置为固定，则引导模式将不会显示答案

【问题标题】：Bootstrap modal won't display if the position of its parent container set to fixed如果其父容器的位置设置为固定，则引导模式将不会显示
【发布时间】：2017-09-13 02:27:13
【问题描述】：

我有一个引导模式，我将其用作说明指南。

我想将它固定在视口的右上角，所以我使用fixed 位置。但是使用此设置时模式会变灰。

如果我使用absolute 位置设置，模态显示很好，但它不会在移动屏幕中固定，因为它会随着缩放事件而移动。

这里是小提琴：https://jsfiddle.net/a8Lcj7rk/

【问题讨论】：

为什么不只修复按钮而不是整个容器？模态不是按钮位置的一部分
为什么不使用 Bootstrap 的popovers 组件来处理这些事情呢？它们的目的是相似的方法
您想简单地将您的modal 放在top-right 角落吗？添加此代码，.modal .modal-dialog {margin-right: 0;margin-top: 6px;}。

标签： javascript html css bootstrap-modal

【解决方案1】：

定位元素作为层，.modal-backdrop 采用z-index-1040 并且您的.container 位于z-index:0 如果您想在.modal-backdrop 上方显示它，您需要设置z-index of .container 大于@ 987654328@，在您的情况下为1041 或更多。

.container {
  z-index:1041;
}

【讨论】：

【解决方案2】：

最简单的解决方案。就像我在下面所做的那样，只需将您的模态放在您的容器 div 之外。

模态标记放置

始终尝试将模态框的 HTML 代码放在文档中的顶级位置，以避免其他组件影响模态框的外观和/或功能。

上面的参考是here

.container {
  position: fixed;
  right: 0;
  top: 0;
}

<!DOCTYPE html>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">instruction</button>


</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

【讨论】：

【解决方案3】：

@jindsay 你需要做的就是把你的模态保存在你的主数据容器之外，否则它会影响模态的 Z-index。请查看以下代码。我希望你也有同样的期待。

.container {
  position:fixed;
  right:0;
  top:0;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">instruction</button>
  </div>
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

【讨论】：