引导模态z-index [英] Bootstrap modal z-index

问题描述

问题是：我使用parrallx滚动，所以我有z-index在页面
现在当我尝试通过Bootstrap弹出框模式，让他看起来像这样https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11- 11％2020.38.36.png

，你可以看到，盒子模式不是ontop，任何鼠标点击禁用它。
如果我禁用此CSS代码：

  #content {
 color：＃003bb3; 
 position：relative; 
 margin：0 auto; 
 width：960px; 
 z-index：300; 
 background：url（'../ images / parallax-philosophy-ltl.png'）top center; 
} 
  

只是为了注意，Bootstrap defalut .modal是z-index：1050，所以我不明白为什么它不在所有其他上下文之上。

-modal：

 < section id =launchclass =modal hide fade> 
< header class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>& times;< / button> 
< h3>אשרהגעהלחתונה< / h3> 
< / header> 
< div class =modal-body> 
< form method =postaction =/ updateid =myForm2> 
< input type =radioid =yes_arrivename =arrivalchecked =checkedvalue =yes>מגיע< br& 
< p>< input type =text必需name =fsnamevalue =placeholder =הכנסשםפרטיומשפחה>< / p& 
< p>כמהאנשיםמגיעים？ < / p> 
< select name =numberid =number> 
< option value =0> 0< / option> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
 
< / select> 
< hr /> 
< input type =hiddenname =titleid =titlevalue ={{title}}> 
< input type =radioname =arriid =no_arrivevalue =no>לאעע
< p>סיבהלאיהגעה< / p> 
< input type =textname =no_arrive_reasonplaceholder =קארונעיין，לאשדהחובה> 
< hr /> 
< p class =submit>< input type =submitname =submitvalue =שלח>< / p& 
 
< / form> 
< / div> 
< footer class =modal-footer> 
< button class =btn btn-primarydata-dismiss =modal>关闭< / button> 
< / footer> 
< / section> 
  

，我从顶层菜单触发他：

 < li>< a class =launchdata- toggle =modalhref =＃launch> Approve< / a>< / li& 
 
 
 
 EDIT 
  
 h2> 
 
 
解决方案找到，如果任何人都遇到相同的问题。 
这是方式：添加data-backdrop =false到section或div包含
的模态例如：< section id =launchclass =模式隐藏褪色data-backdrop =false>  
注意它没有得到灰色的背景，所以它是一个肮脏的解决方案，将很高兴听到。
解决方案
问题几乎总是与嵌套z索引有关。作为示例：
 < div style =z-index：1> 
某些内容A 
< div style =z-index：1000000000> 
一些内容B 
< / div> 
< / div> 
< div style =z-index：10> 
一些内容C 
< / div> 
  
如果你看看z-index只有你会期望B，C，A，嵌套在一个明确设置为1的div中，它将显示为C，B，A。
 
 
 
设置位置：fixed锁定该元素的z-index和所有的孩子，这就是为什么改变可以解决问题。
 
 
 
解决方案是找到具有z索引集的父元素，并调整设置或者移动内容，使图层和它们的父容器按照你想要的方式叠加。 Firefox中的Firebug在最右边有一个名为布局的选项卡，您可以快速查看父元素并查看z-index的设置位置。
 
The issue is: I'm using parrallx scrolling, so I have z-index in the page
now when I try to popup a box-modal by Bootstrap I get him to look like this https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

as you can see, the box-modal isn't ontop and any mouse click disables it.
if I disable this css code :
#content {
    color: #003bb3;
    position: relative;
    margin: 0 auto;
    width: 960px;
    z-index: 300;
    background: url('../images/parallax-philosophy-ltl.png') top center;
}
the box modal works.
just to notice, Bootstrap defalut .modal is z-index:1050 , so I cant understand why it's not ontop of all other context.

thats the box-modal:
   <section id="launch" class="modal hide fade">
    <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>אשר הגעה לחתונה  </h3>
    </header>
    <div class="modal-body">
        <form method="post" action="/update" id="myForm2">
            <input type="radio"  id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
            <p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
            <p>כמה אנשים מגיעים?   </p>
            <select name="number" id="number">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>

            </select>
            <hr/>
            <input type="hidden" name="title" id="title" value="{{title}}">
            <input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
            <p>סיבה לאי הגעה</p>
            <input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
            <hr/>
            <p class="submit"><input type="submit" name="submit" value="שלח"></p>

        </form>
    </div>
    <footer class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </footer>
</section>
and I trigger him from top menu:
  <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>
thanks ahead.

EDIT

Solution found if anyone falls to the same problem.
this is the way: add data-backdrop="false" to section or div that you contain the modal with
e.g: <section id="launch" class="modal hide fade in" data-backdrop="false">
notice that it doesn't get the gray background that way, so it's kinda a dirty solution, will be happy to hear of a better one.
解决方案
The problem almost always has something to do with "nested" z-indexes. As an Example:
<div style="z-index:1">
  some content A
  <div style="z-index:1000000000">
    some content B
  </div>
</div>
<div style="z-index:10">
  Some content C
</div>
if you look at the z-index only you would expect B,C,A, but because B is nested in a div that is expressly set to 1, it will show up as C,B,A.

Setting position:fixed locks the z-index for that element and all its children, which is why changing that can solve the problem.

The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want. Firebug in Firefox has a tab in the far right named "Layout" and you can quickly go up the parent elements and see where the z-index is set.

                        
这篇关于引导模态z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！