不透明度的Bootstrap模态出现在背景后面

Question

我有一个引导模式，它包含在一个褪色的div中。

出于某种原因，打开后的模态位于灰色背景后面，因此无法访问。

代码

HTML

<div>
    <button class="btn btn-primary" data-target="#normal" data-toggle=
    "modal">Normal</button>
    <div class="modal fade" id="normal" role="dialog"
    tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>
<div id="faded">
    <button class="btn btn-primary" data-target="#faded-modal" data-toggle=
    "modal">Faded</button>
    <div class="modal fade" id="faded-modal" role=
    "dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>

CSS

#faded {
   opacity: 0.7;
}

结果

正常

褪色

Demo here

正如您在示例中看到的那样，第一个模态正确显示，第二个模式（褪色的模式）出现在背景后面，无法访问。

如何更改此行为？模态应该像往常一样显示......

注意：我无法更改HTML，我需要在父级上保持不透明度，这是一个更简单的示例来显示效果，但还有其他元素也会消失。< / p>

Answer 1

第二个模态也出现在背景前面，但由于父元素是，它会逐渐变为0.7不透明度。如果你想要实现它的不褪色，你需要使父div透明，并在100％宽度和高度，背景颜色和不透明度设置中粘贴一个新的div。您还需要使用z-order确保它出现在模态后面。

Answer 2

不要将“褪色”ID应用于按钮周围的div。将其应用于按钮本身。要使用淡化按钮，请将淡化作为类应用于按钮。

.faded{
  opacity: 0.7;
}

<div>
  <button class="btn btn-primary faded" data-toggle="modal" data-target="#faded-modal">Faded</button>...

http://jsbin.com/jefimarewi

Answer 3

工作代码，只需将淡化的css添加到按钮

#faded{
  opacity: 0.7;

}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<div>
  <button class="btn btn-primary" data-toggle="modal" data-target="#normal">Normal</button>

<div id="normal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sequi, quod, id aut tempora soluta commodi deleniti ratione nesciunt, tenetur iste incidunt veniam dolores accusantium corporis, laboriosam nam provident est.</p>
    </div>
  </div>
</div>
</div>
  
<div id="faded">   <button class="btn btn-primary" data-toggle="modal" data-target="#faded-modal">Faded</button></div>
  
  
 

<div id="faded-modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sequi, quod, id aut tempora soluta commodi deleniti ratione nesciunt, tenetur iste incidunt veniam dolores accusantium corporis, laboriosam nam provident est.</p>
    </div>

</div>
</div>

Answer 4

必须将<div class="modal fade"...移出<div id="faded">...，以便不将<div class="modal fade"...作为其父div。

即。而不是

<div id="faded">
    <button class="btn btn-primary" data-target="#faded-modal" data-toggle=
    "modal">Faded</button>
    <div class="modal fade" id="faded-modal" role=
    "dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>

... TRY

<div id="faded">
    <button class="btn btn-primary" data-target="#faded-modal" data-toggle=
    "modal">Faded</button>

</div>

<div class="modal fade" id="faded-modal" role=
    "dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                ...
            </div>
        </div>
 </div>