Question

我创建了一个页面，它左侧显示了用于显示仪表板的div部分和用于显示一些图标的右侧div部分。单击图标后，应显示弹出窗口。我为此使用了bootstrap。它工作正常但问题是，左侧div部分不可见。任何人都会指导我这里会出现什么问题以及如何解决它？

<div id="mainDiv" style="background: #e5e5e5; overflow: hidden;">
                <div id="left_DB" align="left"
                    style="float: left;  height: 99%; overflow: auto; position: relative;top:1%;"
                    class="left_panel"> Dashboard goes here </div>
                <div id="sideFilters" align="right"
                    style="float: right; width: 50px; background-color: #191919; position: fixed; right: 0; top: 32px;">
                    <div class="rightside" id="ddldiv" style="overflow:hidden;">

                    <a data-toggle="#selectModal" data-target="#modal">
                        <img src="../images/profile.png" height='25' width='25' draggable="false" id="sddl">
                    </a>

                </div>

                    <div class="rightside">
                        <a href="#export" id="exportButton" title="Export"
                            draggable="false"><img src="../images/reports/export.png"
                            width="20" ; draggable="false" id="exportImg"
                            onclick="exportImgDoc();svgToCanvas();" /> </a>
                    </div>
                </div>
                 </div>


<!-- To create customer selection modal pop up when clicking icon on right side -->
        <div class="modal" id="selectModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content"> 
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal"> &times;</button>
                        <h4 class="modal-title">Select value </h4>
                    </div>
                    <div class="modal-body"> 
                        <form> 
                            <div class="form-group"> 

                                <table style="width: 100%">
                                <tr>
                                    <td style="width: 25%">
                                    <label for="Cvalue" style="font-family: Trebuchet MS, sans-serif !important">Value </label>
                            </td>
                        <td style="width: 75%" id="SelectTd"><div style="width: 130px; font-family: Trebuchet MS, sans-serif !important;">
                                <select class="form-control" id="cValue" title="Value" ></select>
                            </div></td>
                    </tr>
                </table>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer"> 
                        <button class="btn btn-primary" data-dismiss="modal"> Close</button>
                    </div>
                </div>
            </div>
         </div>

Answer 1

你的意思是模态窗口隐藏（半透明背景）左框？

然后尝试设置要显示的左div元素的高z-index值。

z-index: 99999;

示例：

这里，当我在上面的示例页面中为左框设置更高的z-index时，它从模态窗口的半透明背景中弹出！

希望它有所帮助。否则，请提供更多详细信息以便更好地了解您的问题。

怎么做才能避免bootstrap使用隐藏其他功能？

1 个答案: