首页 文章

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

提问于
浏览
0

我有一个引导模式,包含在一个褪色的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;
}

结果

正常

Normal

褪色

Faded

Demo here

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

我该如何改变这种行为?模态应该像往常一样显示......

Notes: 我无法更改HTML,我需要在父级上保持不透明度,这是一个更简单的示例来显示效果,但还有其他元素也会褪色 .

4 回答

  • 1

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

  • 0

    工作代码,只是添加了褪色的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>
    
  • 0

    不要将“褪色”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

  • 0

    必须将 <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>
    

    尝试...

    <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>
    

相关问题