ajax自动完成出现在模态弹出窗口下

Posted 2023-05-08

【中文标题】ajax自动完成出现在模态弹出窗口下

【英文标题】：ajax autocomplete appears under modal pop up

【发布时间】：2017-08-01 20:57:53

【问题描述】：

我在模态中有一个 Ajax 自动完成文本框，我遇到的问题是结果出现在模态下。我该如何解决它

autocomplete result appears behind the modal

有我的 JQuery Ajax 代码：

function NewPerformAutoComplete() 
            $("#mainlayout_txtNewPerformDutyNo").autocomplete(                
                source: function (request, response) 
                    $.ajax(
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "PerformDutiesList.aspx/NewPerformAutoComplete",
                        data: 'PerformDutyNo:"' + $("#mainlayout_txtNewPerformDutyNo").val() + '"',
                        dataType: "json",
                        success: function (data) 
                            response(data.d)
                        ,
                        failure: function (response) 
                            alert("No Match");
                        
                    );
                ,
                appendTo: "#upModal",
                select: function (e, i) 
                    $("#mainlayout_txtNewPerformDutyNo").val(i.item.val);
                ,
                minLength: 3
            );
        

html代码：

<button type="button" id="btnNewPerform" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static">انجام کار جدید</button>
<!-- Modal -->
<div class="modal fade" dir="rtl" id="myModal" role="dialog" style="top: 200px; direction: rtl" tabindex="-1">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #5cb85c; color: white !important; text-align: center">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4><span class="glyphicon glyphicon-tasks"></span>&nbsp;<strong> انجام کار جدید</strong></h4>
                        <h4 class="modal-title">
                            <asp:Label Text="" ID="lblModalTitle" runat="server" />
                        </h4>
                    </div>

                    <div class="row" dir="rtl" style="margin: 10px 0px 5px 0px">
                        <div class="col-md-5" style="float: right">
                            <label style="font-size: x-small">شماره انجام کار:</label>
                        </div>
                        <div class="col-md-7">
                            <asp:TextBox runat="server" ID="txtNewPerformDutyNo" class="form-control input-sm" Placeholder="شماره انجام کار" />
                        </div>
                    </div>

                    <div class="row" dir="rtl" style="margin: 5px 0px 10px 0px">
                        <div class="col-md-5" style="float: right">
                            <label style="font-size: x-small">شماره درخواست:</label>
                        </div>
                        <div class="col-md-7">
                            <asp:TextBox runat="server" ID="txtNewReqNo" class="form-control input-sm" Placeholder="شماره درخواست" />
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" id="btnSubmitNew" runat="server" onserverclick="btnSubmitNew_ServerClick" class="btn btn-success btn-xs" aria-hidden="true" style="float: left; width: 70px">ثبت</button>
                        <button type="button" class="btn btn-danger btn-xs" data-dismiss="modal" aria-hidden="true" style="float: left">بستن</button>
                    </div>
                    <label id="lblModalMessage" runat="server" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

提前谢谢你

【问题讨论】：

您需要将自动完成 HTML 的 CSS z-index 属性设置为大于模态。

我用 !Important 标签为所有类别的自动完成答案做了，但这种方法不起作用

【参考方案1】：

我找到了解决办法

bootstrap.css中modal的z-index属性为1050，需要将autocomplete answer的z-index属性改成更高的值，比如2000。为此，“ui-front”类中的z-index属性jquery-ui.css 对自动完成答案的影响。改成这样：

    .ui-front 
    z-index: 2000 !important;