Question

我使用的是Bootstrap 3.2.0和模态插件。我对身体背后的模态有问题＆＃34;背景＆＃34;。这不是我第一次使用这个插件;我以前从来没有遇到任何问题。

enter image description here

Here is the page showing the problem（点击页面右下角的查询）。

它认为这是一个z-index问题。页面结构：

   <body>
       <!-- Canvas wrapping entirely the content (z-index: 2) -->
       <div class="canvas canvas-property-show">
           <!-- The modal (z-index: 1050) -->
           <div id="modal-iframe-inquiry"></div>
       </div>

       <!-- Navmenu shown only on small viewport (z-index: 1) -->
       <div class="navmenu navmenu-adp navmenu-fixed-left"></div>
   </body>

模态#modal-iframe-inquiry的默认z-index为1050。

如果我从DOM中移除.navmenu并从z-index移除.canvas属性解决问题。

Answer 1

好的 - 修复而不是在modal-iframe-enquiry中呈现canvas html 在画布之前或之后渲染它。 e.g。

.......             
<div class="modal fade in" id="modal-iframe-inquiry" tabindex="-1" role="dialog" aria-labelledby="modal-iframe-inquiry-title" 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" id="modal-iframe-inquiry-title">Inquire about</h4>
                        </div>
                        <div class="modal-body">
                            <div class="embed-responsive" style="height: 640px;">
                                <iframe src="https://app.kigo.net/public/inquiry_embed/2-a77d11161e667005ce29f22b3e7a8d04-1738-f1db7ab2c4c99c15b210e92bd0f90239"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div><div class="canvas canvas-property-show">
    ......

Bootstrap模式在背后“落后”，用户无法点击？

1 个答案: