Bootstrap模态出现在背景下

小开

最佳答案

如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素中，则会发生这种行为。

确保模态容器及其所有父元素都以默认方式定位以解决问题。

这里有一些方法:

最简单的方法是移动modal div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在结束正文标签</body>之前。
或者，您可以从模态及其祖先中删除position: CSS属性，直到问题消失。然而，这可能会改变页面的外观和功能。

小开

我通过给模态窗口后打开一个高z-index值来让它工作。例如:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

小开

这个问题与父容器的定位有关。你可以很容易地将你的模式从这些容器中“移动”出来，然后再显示出来。下面是如何做到这一点，如果你使用js showing你的模态:

$('#myModal').appendTo("body").modal('show');

或者，如果你使用按钮启动模态，删除.modal('show');，只需执行:

$('#myModal').appendTo("body")

这将保持所有正常的功能，允许您使用按钮显示模式。

小开

尝试覆盖类.modal-open溢出值从hidden到visible:

.modal-open {
overflow: visible;
}

小开

我发现通过添加内联样式标签来设置“display: none”可以防止这个问题。代码的位置没有任何影响。

小开

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

小开

但是迟了，这里有一个通用的解决方案

    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--;
}
});

访问这个链接- 当使用固定的侧边栏时，引导3模式消失在背景下了解详细信息。

小开

嗨，我有同样的问题，然后我意识到，当你使用引导3.1 不同于旧版本的bootstrap (2.3.2) 模态的HTML结构被改变了!< / p >

# EYZ0

<div class="modal hide fade">


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


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


</div>
</div>


</div>

小开

在我的情况下，我有一个包装与以下:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

只删除了z-index:1，不知道为什么要修复这个问题。当然也可以移除相对位置，但我需要它。

小开

你可以做一个变通，但这将从所有页面删除淡入。模态会像Facebook弹出窗口一样弹出。打开模态try:

 $('.modal-backdrop').removeClass('modal-backdrop');

小开

删除模式背景背景设置为黑色在你的引导CSS

我看到:

.modal-backdrop {
position: fixed; /*---- commented and it shows */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
/*background-color: #000000; */
}

然后添加这个背景色和o.5的不透明度。我看到:

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;

｝

注意:虽然这些变化是在boostrap css中做出的，但我使用了angular-strap，我没有下载或使用ng-animate css

小开

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

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

请注意: data-backdrop属性需要设置为false (其他选项: static或true)。

小开

我尝试了上面提供的所有选项，但没有得到它的工作使用这些。

奏效的方法:设置。modal- background的z-index为-1。

.modal-backdrop {
z-index: -1;
}

小开

另外，确保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>

小开

添加到你的样式表:

.modal-backdrop {
background-color: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 0 !important;
}

小开

另一种方法是从bootstrap.css中的.modal-backdrop中删除z-index。这将导致背景与身体的其他部分在同一水平线上(它仍然会褪色)，你的模态在顶部。

.modal-backdrop看起来像这样

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}

小开

这种行为有时发生在有未关闭标记的情况下，尤其是未关闭的</div>。你可以检查你的模式的位置，确保所有标签都正确关闭，或者更好的是将div模式移动到页面底部，在</body>标签框之前

小开

在我的例子中，原因是boostrap.min.css。当我将它作为参考从HTML文件中排除后，对话框显示在模态阴影前面。

小开

我简单地设置了:

#myModal {
z-index: 1500;
}

它工作....

对于原来的问题:

.my-module {
z-index: 1500;
}

小开

将绝对位置更改为相对位置。

.modal-backdrop {
position: relative;
/* ... */
}

小开

我删除了模态背景。

.modal-backdrop {
display:none;
}

这不是更好的解决方案，但对我来说是可行的。

小开

你也可以从.modal- background中删除z索引。生成的css看起来像这样。

.modal-backdrop {
}
.modal-backdrop.in {
opacity: .35;
filter: alpha(opacity=35); }

小开

和Davide Lorigliola一样，我通过提高z指数来解决这个问题:

.modal-backdrop { z-index: -999999; }

小开

在你的情态动词中使用:

data-backdrop="false"

小开

@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来创建一个虚拟的背景色。

< >强更新1: 正如@Gustyn指出的那样，点击背景并不能像预期的那样关闭对话框。为了实现这个，你必须添加一些java脚本代码。这里有一些例子，你可以实现这一点。< / p >

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

小开

上述建议的解决方案都不适合我，但这个技巧解决了问题:

$('#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);
});

小开

当在CSS中为背景或甚至是手风琴头使用渐变之类的东西时，经常会遇到这个问题。

不幸的是，修改或覆盖核心的Bootstrap CSS是不可取的，并且可能导致不需要的副作用。侵入性最小的方法是添加data-backdrop="false"，但您可能会注意到渐隐效果不再像预期的那样工作。

继Bootstrap的最新版本之后，3.3.5版本似乎解决了这个问题，并且没有不必要的副作用。

下载:# EYZ0

确保包含3.3.5中的CSS文件和JavaScript文件。

小开

我发现:

在bootstrap 3.3.0中是不对的，但在bootstrap 3.3.5中是对的。让我们看看代码。 3.3.0: < / p >

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)

小开

$('.modal').insertAfter($('body'));

小开

我有这个问题，最简单的解决方法是在modal-dialog div上添加z-index大于1040:

<div class="modal-dialog" style="z-index: 1100;">

我相信bootstrap创建了一个div模态背景淡出，在我的情况下，z指数为1040，所以如果你把模态对话框放在上面，它应该不再是灰色的。

小开

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

例如,< p > .sidebarwrapper的z-index为1100，因此将.modal的z-index设置为1101

.modal {
z-index: 1101;
}

小开

我也有同样的问题，也检查了Muhd的答案。

但是，我的模态需要左，顶部属性，所以只要把固定位置改为绝对，它就工作了。

.modal {
position: absolute;
}

小开

只需添加两行CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

modal- background应该有1050的值来设置它在导航栏上。

小开

将这个添加到您的页面。

<script type="text/javascript">
$('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

小开

我通过在DIV标签下面添加样式来修复这个问题

style="background-color: rgba(0, 0, 0, 0.5);"

并添加自定义css

.modal-backdrop {position: relative;}

小开

在附加到主体时要小心!

这肯定会从背景后面得到那个模态:

$('#myModal').appendTo("body").modal('show');

然而，这将在每次打开主体时添加另一个模态，这可能会导致在更新面板中添加具有编辑和更新的网格视图等控件到模态时头痛。因此，你可以考虑在模式关闭时删除它:

例如:

$(document).on('hidden.bs.modal', function () {
$('.modal').remove();
});

将删除添加的模态。(当然，这是一个例子，你可能想要使用另一个你添加到模态的类名)。

正如其他人已经说过的;你可以简单地从模式中关闭back-drop (data- background ="false")，或者如果你不能没有屏幕变暗，你可以调整.modal- backstage CSS类(或者增加z-index)。

小开

我有一个更轻更好的解决方案。

它可以很容易地解决通过一些额外的CSS样式..

隐藏类.modal-backdrop(从Bootstrap.js自动生成)

.modal-backdrop
{
display:none;
visibility:hidden;
position:relative
}

set the background of .modal to a translucent black backdrop image.

.modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images
z-index:1100;
}

This will works best if you have a requirement that needs the modal to be inside an element and not near the </body> tag..

小开

我在Iphone和Ipad上使用Sharepoint 2013时遇到了这样的问题

我只是在JS上使用这个:

$('#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);
});

小开

在我的情况下解决它，在我的样式表中添加这个:

.modal-backdrop{
z-index:0;
}

带谷歌调试器，可以检查元素背景和修改属性。google的运气。

小开

这将覆盖所有的模态，而不会搞乱任何动画或预期的行为。

$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});

小开

function addclassName(){
setTimeout(function(){
var c = document.querySelectorAll(".modal-backdrop");
for (var i = 0; i < c.length; i++) {
c[i].style.zIndex =  1040 + i * 20  ;
}
var d = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}

小开

根据前面的答案，这可能有几个原因。对我来说，问题是在不知情的情况下引用了两个不同的Bootstrap链接，所以删除一个就解决了问题

在我的例子中，我包括了这个:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

还有一个离线的，我的笔记本电脑里已经有了。

小开

这招对我很管用:

sass:
.modal-backdrop
display: none
#yourModal.modal.fade.in
background: rgba(0, 0, 0, 0.5)

小开

我只是从_modal中删除了position: fixed样式。SCSS文件，它似乎为我工作良好。我仍然有背景和它的工作预期。

// Modal background
.modal-backdrop {
/* commented out position: fixed - bug fix */
//position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade {
opacity: 0;
}

向Rick Strahl在“引导模式对话框显示在模式背景下”中的指导致敬。

小开

对我来说，最简单的解决方案是把我的模态放在一个绝对位置和z索引高于.modal- background的包装器中。因为模态背景(至少在我的情况下)的z指数为1050:

.my-modal-wrapper {
position: absolute;
z-index: 1060;
}

<div class="my-modal-wrapper"></div>

小开

试试这段代码的CSS。

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }

例:

    $(window).on('load', function() {
      

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });


});

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');


body {
margin: 10px;
padding-top: 50px;
}


.my-module {
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}


.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap 3 Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">




<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">


<link rel="stylesheet" type="text/css" href="/css/result-light.css">


<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">




</head>
<body class="modal-open">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>


<p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>


<p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>


<p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>


<p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>
    

    

<div class="my-module">
This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    

</div>
</div>
</body></html>

小开

我只在iOS设备上遇到过类似的问题。

解决方案是从父元素元素中删除-webkit-overflow-scrolling: touch

小开

解决方案是将模态直接放在body标签下。如果因为某些原因这是不可能的，那么只需添加一个overflow: visible属性到包含模态的标记中，或使用以下代码:

<script>
$(document).on('show.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'visible');
});


$(document).on('hide.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'auto');
});
</script>
<div class="div-wrapper-for-modal">
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>

小开

将不透明度设为1

.modal{
opacity:1;
}

小开

我解决了我的问题，添加data-backdrop="false"到div:

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">


.....

小开

对于那些像我这样在没有使用插件或主题的情况下将引导添加到Wordpress的人:

我在function.php文件中添加了CSS和JS引导。然后，在wordpress页面中调用modal。无论我做什么，.modal-backdrop一直在#mymodal的前面。我发现这是一个z - index的问题，但是，由于#mymodal是在content div和.modal-backdrop中生成的，在<body>的末尾，z-index不能工作。我所做的是移动#mymodal到结尾以及在它生成后:

$(document).ready(function () {
$('#mymodal').on('shown.bs.modal', function () {
$('#mymodal').appendTo(document.body);
})
});

顺便说一下，我必须在$(document).ready中添加shown.bs.modal，因为当我点击按钮时它没有被调用。

小开

.modal-backdrop {
/* bug fix - no overlay */
display: none;}

小开

我发现的最简单的解决方案，适用于所有我的情况，是一个答案在类似的帖子中:

下面就是:

.modal {
background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop {
display: none;
}

基本上，原来的背景没有使用。相反，你使用情态动词作为背景。结果是它的外观和行为与原始版本完全一致。它避免了z索引的所有问题(对我来说，将z索引改为0解决了这个问题，但创建了一个新的问题，我的导航菜单介于模式和背景之间)，而且很简单。

感谢@Jevin O. Sewaruth发布的原始答案。

小开

检查你的css，看看你是否有任何模糊和过滤器。我从css中删除了这段代码，模态再次正常工作

.modal-open .main-wrapper {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}

小开

有

transform:translate3d(0, 0, 0);

在任何祖先元素上也会导致这种情况。在bootstrap 4.6.0上测试。

小开

角:

($('.modal-backdrop') as any).remove();

小开

我浏览了我的HTML，发现我有一个未关闭的<div>标签。关闭<div>为我解决了这个问题。 PS: <div>标签既不是模态的祖先，也不是模态的子

小开

最简单的解决方案是将模态对话框移到任何容器之外，并在<body>元素下声明它:

<body>
<div>
...
<div>
    

    

<div class="modal">
... modal dialog here
</div>
</body>

我试过这个方法，对我很有效。

来源:# EYZ0

小开

对我来说，解决办法很简单，我忘了加“情态动词”。在div上创建一个id为“my-modal”的类。由$('#my-modal').modal('show');推广

因为div的内容包含了所有需要的内容，所以除了上面的覆盖之外，屏幕上的结果几乎是完美的。

我敢打赌，其他与z-index技巧或其他css技巧无关的父div或未关闭div的位置的答案也可能是在这种情况下。

小开

原来的JS方法导致了我的模态的多个克隆如果组件被初始化多次，则附加到主体。相反，首先确认模式不是已经附加:< / p >

function AttachModalsToBody(modalID) {
var modal = $("body").children('#' + modalID);
if ($("body").children('#' + modalID).length == 0) {
$('#' + modalID).appendTo("body");
}
}

在Blazor(我使用Bootstrap 5.0)中，我做了以下操作(改编自@AdamAlbright的回答)，以防止模态出现在背景后面:

在我的项目中，每个模态都在自己独立的组件中，因为我需要从其他组件中设置它们的参数，显然不可能将模态移动到这些父组件之外。因此，当它第一次呈现时，我使用JS Interop将每个模态附加到主体。

例如:MyModal.razor

在每个模态/组件内部:

@inject IJSRuntime jsRuntime


<!--HTML Section omitted for brevity-->


@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await jsRuntime.InvokeVoidAsync("AttachModalToBody", "#myModalID");
}
}

在JS文件中:

function AttachModalToBody(modalID) {
$(modalID).appendTo("body");
}

小开

我在使用Angular 14时遇到了这个问题，我通过将.modal-backdrop从位置:固定;改为位置:相对;解决了这个问题

::ng-deep.modal-backdrop {
--bs-backdrop-zindex: 1050;
--bs-backdrop-bg: #000;
--bs-backdrop-opacity: 0.5;
position: relative;
top: 0;
left: 0;
z-index: var(--bs-backdrop-zindex);
width: 100vw;
height: 100vh;
background-color: var(--bs-backdrop-bg);
}