Bootstrap模态出现在背景下-Java 学习之路

502

我已经从Bootstrap示例中直接使用了我的模态代码，并且只包含了bootstrap.js（而不是bootstrap-modal.js） . 但是，我的模态出现在灰色淡入淡出（背景）下方，并且不可编辑 .

这是它的样子：

modal hiding behind backdrop

有关重现此问题的一种方法，请参阅this fiddle . 该代码的基本结构如下：

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

任何想法为什么这是或我可以做些什么来解决这个问题？

30 回答

14
如果模态容器具有固定或相对位置或位于具有固定或相对位置的元素内，则会发生此行为 .

Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

以下是几种方法：
- 最简单的方法是移动模态div，使其位于任何具有特殊定位的元素之外 . 一个好地方可能就在关闭身体标签 </body> 之前 .
- 或者，您可以从模态及其祖先中删除 position: CSS属性，直到问题消失 . 但是，这可能会改变页面的外观和功能 .
回复于 2024-04-29T07:57:47+08:00
2
问题与父容器的定位有关 . 在显示之前，您可以轻松地从这些容器中输出您的模态 . 如果你使用js _578539使用你的模态，这是怎么做的：
```
$('#myModal').appendTo("body").modal('show');
```
或者，如果您使用按钮启动模式，请删除 .modal('show'); 并执行以下操作：
```
$('#myModal').appendTo("body")
```
这将保留所有正常功能，允许您使用按钮显示模态 .
回复于 2024-04-29T07:57:47+08:00
1
我尝试了上面提供的所有选项，但没有使用它们 .

What did work: 将.modal-backdrop的z-index设置为-1 .
```
.modal-backdrop {
  z-index: -1;
}
```
回复于 2024-04-29T07:57:47+08:00

另外，请确保BootStrap css和js的版本相同 . 不同版本也可以在背景下显示模态：

例如：

坏：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

好：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

回复于 2024-04-29T07:57:47+08:00

我也遇到过这个问题，直到我发现我实际上不需要背景时，没有一个解决方案适合我 . 您可以使用下面的代码轻松删除背景 .

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Note ： data-backdrop 属性需要设置为 false （other options： static 或 true ） .

回复于 2024-04-29T07:57:47+08:00

3
我通过给模态窗口 AFTER 提供一个高z-index值来使它工作 . 例如 . ：
```
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
```
回复于 2024-04-29T07:57:47+08:00

@Muhd提供的解决方案是最好的方法 . 但是，如果您遇到不能选择更改页面结构的情况，请使用此技巧：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</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>

这里的技巧是 data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" 删除默认背景并通过设置对话框本身的背景颜色和一些alpha创建一个虚拟背景 .

Update 1: 正如@Gustyn指出的那样，单击背景并不会按预期关闭对话框 . 所以要实现这一点，你必须添加一些java脚本代码 . 以下是如何实现这一目标的一些示例 .

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

回复于 2024-04-29T07:57:47+08:00

但是这很晚但是这里是一个通用的解决方案 -

var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

请访问此链接 - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar了解详情 .

回复于 2024-04-29T07:57:47+08:00

2
另一种方法是从bootstrap.css中的 .modal-backdrop 中删除z-index . 这将导致背景与身体的其他部分处于同一水平（它仍然会褪色），并且您的模态将位于顶部 .

.modal-backdrop 看起来像这样
```
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
```
回复于 2024-04-29T07:57:47+08:00
3
只需添加两行CSS：
```
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
```
.modal-backdrop应该有1050的值来设置它在导航栏上 .
回复于 2024-04-29T07:57:47+08:00
6
我只是设置：
```
#myModal {
    z-index: 1500;
}
```
它的工作原理....

对于原始问题：
```
.my-module {
    z-index: 1500;
}
```
回复于 2024-04-29T07:57:47+08:00
5

当在背景甚至手风琴 Headers 之类的东西中使用CSS中的渐变等内容时，通常会遇到此问题 .

不幸的是，修改或覆盖核心Bootstrap CSS是不可取的，并且可能导致不必要的副作用 . 最不具侵入性的方法是添加 data-backdrop="false" ，但您可能会注意到淡入淡出效果不再按预期工作 .

在最近发布的Bootstrap之后，版本3.3.5似乎解决了这个问题，没有不必要的副作用 .

下载：https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

请务必包含3.3.5中的CSS文件和JavaScript文件 .

回复于 2024-04-29T07:57:47+08:00
7
嗨，我有同样的问题，然后我意识到，当你使用bootsrap 3.1不同于旧版本的bootsrap（2.3.2）模式的html结构已更改！

you must wrap your modal header body and footer with modal-dialog and modal-content
```
<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
```
回复于 2024-04-29T07:57:47+08:00
322
我有这个问题，修复它的最简单方法是在模态对话框div上添加大于1040的z-index：
```
<div class="modal-dialog" style="z-index: 1100;">
```
我相信bootstrap会创建一个div模态背景淡入淡出，在我的情况下有z-index 1040，所以如果你把模态对话框放在这个上面，它就不应该变灰了 .
回复于 2024-04-29T07:57:47+08:00
3
在你的模态中使用它：
```
data-backdrop="false"
```
回复于 2024-04-29T07:57:47+08:00

以上建议的解决方案都没有为我工作，但这种技术解决了这个问题：

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

回复于 2024-04-29T07:57:47+08:00

147
将z-index .modal设置为最高值

例如，.sidebarwrapper的z-index为1100，因此将.modal的z-index设置为1101
```
.modal {
    z-index: 1101;
}
```
回复于 2024-04-29T07:57:47+08:00
2
我有一个更轻，更好的解决方案..

It could be easily solve through some additional CSS styles..
- 隐藏类 .modal-backdrop （从Bootstrap.js自动生成）
```
.modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}
```
- 设置背景 .modal 到半透明的黑色背景图像 .
```
.modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}
```
如果您的需求需要模态位于元素内而不是 </body> 标记附近，这将最有效 .
回复于 2024-04-29T07:57:47+08:00
3
在我的情况下解决它，在我的样式表中添加：
```
.modal-backdrop{
  z-index:0;
}
```
使用google调试器，可以检查元素BACKDROP并修改属性 . 祝你好运 .
回复于 2024-04-29T07:57:47+08:00
545

你的导航栏 navbar-fixed-top 需要 z-index = 1041 ，如果你使用 bootstarp-combined.min.css 也改变 .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

回复于 2024-04-29T07:57:47+08:00
8
将绝对位置更改为相对位置 .
```
.modal-backdrop {
    position: relative;
    /* ... */
}
```
回复于 2024-04-29T07:57:47+08:00
3
您也可以从.modal-backdrop中删除z-index . 产生的css看起来像这样 .
```
.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
```
回复于 2024-04-29T07:57:47+08:00
145
我删除了模态背景 .
```
.modal-backdrop {
    display:none;
}
```
这不是更好的解决方案，但对我有用 .
回复于 2024-04-29T07:57:47+08:00

我发现的是：

在bootstrap 3.3.0中它不对，但是当它处于bootstrap 3.3.5时它是正确的 . 它看到了代码 . 3.3.0：

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

回复于 2024-04-29T07:57:47+08:00

5
```
$('.modal').insertAfter($('body'));
```
回复于 2024-04-29T07:57:47+08:00
89
这将覆盖所有模态而不会弄乱任何动画或预期行为 .
```
$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
```
回复于 2024-04-29T07:57:47+08:00
10
就我而言，我有一个包含以下内容的包装器：
```
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
```
只删除了z-index：1并且不知道为什么修复了这个问题 . 也确定删除相对位置但我需要它 .
回复于 2024-04-29T07:57:47+08:00
4

在我的情况下，原因是boostrap.min.css :)一旦我从我的html文件中排除它作为参考，对话框显示在forn的模态阴影:)

回复于 2024-04-29T07:57:47+08:00
29
我通过在DIV标签下面添加样式来解决这个问题
```
style="background-color: rgba(0, 0, 0, 0.5);"
```
并添加自定义CSS
```
.modal-backdrop {position: relative;}
```
回复于 2024-04-29T07:57:47+08:00
55
尝试覆盖类.modal-open溢出值从隐藏到可见 .
```
.modal-open {
    overflow: visible;
}
```
回复于 2024-04-29T07:57:47+08:00

Bootstrap模态出现在背景下

30 回答

相关问题