PROSAGA码农传奇-Bootstrap-Bootstrap模态出现在背景下

28 条回复

0#
回复此人
biu~额 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 当在背景甚至手风琴标题之类的东西中使用CSS中的渐变之类的东西时，通常会遇到这个问题。 </p> <P> 不幸的是，修改或覆盖核心Bootstrap CSS是不可取的，并且可能导致不必要的副作用。最不具侵入性的方法是添加 <code> data-backdrop="false" </code> 但您可能会注意到淡入淡出效果不再按预期工作。 </p> <P> 在最近发布的Bootstrap之后，版本3.3.5似乎解决了这个问题，没有不必要的副作用。 </p> <P> 下载： <a href="https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip"> https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip </A> </p> <P> 请务必包含3.3.5中的CSS文件和JavaScript文件。 </p> </DIV>

编辑
1#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我通过在DIV标签下面添加样式来解决这个问题 </p> <pre> <code> style="background-color: rgba(0, 0, 0, 0.5);" </code> </pre> <P> 并添加自定义CSS </p> <pre> <code> .modal-backdrop {position: relative;} </code> </pre> </DIV>

编辑
2#
回复此人
别烦我 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在导航栏中 <code> navbar-fixed-top </code> 需要 <code> z-index = 1041 </code> 如果你使用的话 <code> bootstarp-combined.min.css </code> 也改变了 <code> .navbar-fixed-top, .navbar-fixed-bottom </code> <code> z-index to 1041 </code> </p> </DIV>

编辑
3#
回复此人
青年@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我删除了模态背景。 </p> <pre> <code> .modal-backdrop { display:none; } </code> </pre> <P> 这不是更好的解决方案，但对我有用。 </p> </DIV>

编辑
4#
回复此人
独奏♪ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有一个更轻，更好的解决方案.. </p> <P> 的<strong> 它可以通过一些额外的CSS样式轻松解决.. </强> </p> <OL> <LI> <P> 隐藏课程 <code> .modal-backdrop </code> （从Bootstrap.js自动生成） </p> <pre> <code> .modal-backdrop { display:none; visibility:hidden; position:relative } </code> </pre> </LI> <LI> <P> 设置背景 <code> .modal </code> 到半透明的黑色背景图像。 </p> <pre> <code> .modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; } </code> </pre> </LI> </醇> <P> 如果您的需求需要模态位于元素内而不是靠近元素，那么这将最有效 <code> </body> </code> 标签.. </p> </DIV>

编辑
5#
回复此人
star | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 但是这很晚但是这里是一个通用的解决方案 - </p> <pre> <code> 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--; } }); </code> </pre> <P> 访问此链接 - <a href="https://stackoverflow.com/questions/21126617/bootstrap-3-modal-disappearing-below-backdrop-when-using-a-fixed-sidebar/21127348#21127348"> Bootstrap 3 - 使用固定侧边栏时，模态在背景下消失 </A> 详情。 </p> </DIV>

编辑
6#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您还可以从.modal-backdrop中删除z-index。产生的css看起来像这样。 </p> <pre> <code> .modal-backdrop { } .modal-backdrop.in { opacity: .35; filter: alpha(opacity=35); } </code> </pre> </DIV>

编辑
7#
回复此人
哇塞 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在你的模态中使用它： </p> <pre> <code> data-backdrop="false" </code> </pre> </DIV>

编辑
8#
回复此人
庸人自扰1 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这对我有用： </p> <pre> <code> sass: .modal-backdrop display: none #yourModal.modal.fade.in background: rgba(0, 0, 0, 0.5) </code> </pre> </DIV>

编辑
9#
回复此人
句号了哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我只是设置： </p> <pre> <code> #myModal { z-index: 1500; } </code> </pre> <P> 它的工作原理.... </p> <P> 对于原始问题： </p> <pre> <code> .my-module { z-index: 1500; } </code> </pre> </DIV>

编辑
10#
回复此人
My☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我也遇到过这个问题，直到我发现我实际上不需要背景时，没有一个解决方案适合我。您可以使用以下代码轻松删除背景。 </p> <pre> <code> <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> </code> </pre> <P> 的<strong> 注意 </强> ： <code> data-backdrop </code> 属性需要设置为 <code> false </code> （ <a href="https://getbootstrap.com/docs/3.3/javascript/#modals-options" rel="noreferrer"> 其他选择 </A> ： <code> static </code> 要么 <code> true </code> ）。 </p> </DIV>

编辑
11#
回复此人
誓言你好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发现的是： </p> <P> 在bootstrap 3.3.0中它不对，但是当它在bootstrap 3.3.5中时它是正确的。它看到了代码。 3.3.0： </p> <pre> <code> this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') .prependTo(this.$element) </code> </pre> <P> 3.3.5 </p> <pre> <code> this.$backdrop = $(document.createElement('div')) .addClass('modal-backdrop ' + animate) .appendTo(this.$body) </code> </pre> </DIV>

编辑
12#
回复此人
仙风道骨刘憨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需添加两行CSS： </p> <pre> <code> .modal-backdrop{z-index: 1050;} .modal{z-index: 1060;} </code> </pre> <P> .modal-backdrop应该有1050的值来设置它在导航栏上。 </p> </DIV>

编辑
13#
回复此人
無口君哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 就我而言，我有一个包含以下内容的包装器： </p> <pre> <code> .wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;} </code> </pre> <P> 只删除了z-index：1并且不知道为什么修复了这个问题。也确定删除了相对位置，但我需要它。 </p> </DIV>

编辑
14#
回复此人
凯撒 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在我的情况下解决它，在我的样式表中添加： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .modal-backdrop{ z-index:0; } </code> </pre> </DIV> </DIV> <P> </p> <P> 使用google调试器，可以检查元素BACKDROP并修改属性。祝你好运。 </p> </DIV>

编辑
15#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以上建议的解决方案都没有为我工作，但这种技术解决了这个问题： </p> <pre> <code> $('#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); }); </code> </pre> </DIV>

编辑
16#
回复此人
只怕再见是故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $('.modal').insertAfter($('body')); </code> </pre> </DIV>

编辑
17#
回复此人
࿏自ོ༾由ོ༽人͙⃡⌇ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另外，请确保BootStrap css和js的版本相同。不同的版本也可以在背景下出现模态： </p> <P> 例如： </p> <P> 坏： </p> <pre> <code> <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> </code> </pre> <P> 好： </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
18#
回复此人
日耀九洲 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 嗨，我有同样的问题，然后我意识到，当你使用bootsrap 3.1 与较旧版本的bootsrap（2.3.2）不同模态的html结构改变了！ </p> <P> 的<strong> 你必须用模态对话框和模态内容包装模态标题的主体和页脚 </强> </p> <pre> <code> <div class="modal hide fade"> <div class="modal-dialog"> <div class="modal-content"> **here goes the modal header body and footer** </div> </div> </div> </code> </pre> </DIV>

编辑
19#
回复此人
撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有这个问题，修复它的最简单方法是在模态对话框div上添加大于1040的z-index： </p> <pre> <code> <div class="modal-dialog" style="z-index: 1100;"> </code> </pre> <P> 我相信bootstrap会创建一个div模式背景淡入淡出，在我的情况下有z-index 1040，所以如果你把模态对话框放在这个上面，它就不应该变灰了。 </p> </DIV>

编辑
20#
回复此人
圈圈红 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这将覆盖所有模态而不会弄乱任何动画或预期行为。 </p> <pre> <code> $(document).on('show.bs.modal', '.modal', function () { $(this).appendTo('body'); }); </code> </pre> </DIV>

编辑
21#
回复此人
不想吃东西 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 将z-index .modal设置为最高值 </p> <P> 例如， .sidebarwrapper的z-index为1100，因此将.modal的z-index设置为1101 </p> <pre> <code> .modal { z-index: 1101; } </code> </pre> </DIV>

编辑
22#
回复此人
نسر الصحراء | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 问题与父容器的定位有关。在显示之前，您可以轻松地从这些容器中“移动”模态。如果你是这样的话，这是怎么做的 <code> show </code> 使用js来模态你的模态： </p> <pre> <code> $('#myModal').appendTo("body").modal('show'); </code> </pre> <P> 或者，如果您使用按钮启动模式，请删除 <code> .modal('show'); </code> 而且只是做： </p> <pre> <code> $('#myModal').appendTo("body") </code> </pre> <P> 这将保留所有正常功能，允许您使用按钮显示模态。 </p> </DIV>

编辑
23#
回复此人
故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另一种方法是从中删除z-index <code> .modal-backdrop </code> 在bootstrap.css中。这将导致背景与身体的其他部分处于同一水平（它仍会褪色），并且您的模态将位于顶部。 </p> <P> <code> .modal-backdrop </code> 看起来像这样 </p> <pre> <code> .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; } </code> </pre> </DIV>

编辑
24#
回复此人
不丶离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 将绝对位置更改为相对位置。 </p> <pre> <code> .modal-backdrop { position: relative; /* ... */ } </code> </pre> </DIV>

编辑
25#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我尝试了上面提供的所有选项，但没有使用它们。 </p> <P> 的<strong> 做了什么工作： </强> 将.modal-backdrop的z-index设置为-1。 </p> <pre> <code> .modal-backdrop { z-index: -1; } </code> </pre> </DIV>

编辑
26#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在我的情况下，原因是boostrap.min.css :)一旦我从我的html文件中排除它作为参考，对话框显示在forn的模态阴影:) </p> </DIV>

编辑

登录后才能参与评论