Question

即使在上面显示了boostrap模式，父视图中的下拉也是可见的。如果有任何方法可以解决，请告诉我。如果有任何方法可以解决，请告诉我。以下是参考图片。

下面是我的引导模态代码：

 <div class="modal" id="AuthorModel" role="dialog">
        <div class="modal-dialog mainModal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Author List</h4>
                </div>
                <div class="modal-body divauthor" id="divauthor">

                    <div class="divSearch authorsearch">
                        <div class="SearchBox">
                            <input type="text" onkeyup="AuthorSearch()" id="btnsearchtxt" name="srch-term" placeholder="Search" autofocus/>
                        </div>
                        <div class="SearchAction">
                            <div class="SearchActionAlign">
                                <a href="#" onclick="clearSearchResultOfAuthor()" class="NonAction ActionClick">
                                    <img src="../../assets/images/icons/close.png" alt="Cancel" class="ImgClose" />
                                </a>
                                <a href="#" class="NonAction ActionClick" id="btnsearchtxt">
                                    <img src="../../assets/images/icons/search.jpg" alt="Search" class="ImgSearch" />
                                </a>
                            </div>
                        </div>
                    </div>

                    <div id="divauthorlist" class="divauthorlist" data-dismiss="modal"></div>

                </div>

            </div>

        </div>

    </div>

下面是我的css代码：

   #AuthorModel .divauthorlist {
        cursor: pointer;
        max-height: 400px;
        overflow: auto;
        padding: 5px;
    }
    #AuthorModel .mainModal .modal-content{
        background-color: white!important;
    }
    #AuthorModel .modal-content .modal-body {
        padding: 15px 1px 15px 15px!important;
    }

    #AuthorModel .modal-header .close {
        padding-right: 10px;
        color: white;
    }

    #AuthorModel .modal-header {
        background: var(--blue);
        color: #FFF;
        padding: 2px;
        height: 30px;
        font-size: 12pt;
        padding-left: 12px;
        display: inline-block;
        width: 100%;
        border-bottom: 0px;
    }

    #AuthorModel .authorsearch {
        margin-top: 0%;
        margin-bottom: 2%;
    }

    #AuthorModel #btnsearchtxt {
        width: 100%;
        border: 0 none;
        padding: 0px 0px 1px 6px;
        height: 28px;
        color: #000;
    }

Answer 1

将z-index属性更高的值添加到影响未正确显示的元素的类中。在此处检查其定义（和示例）：All About.... Z-Index?

无法模拟您的代码，请添加一个小提琴，以便我可以试一试。

模态显示在透明的身体

1 个答案: