Question

我在模态中有一个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>

提前谢谢

Answer 1

我找到了解决方案

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

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

模式弹出下会出现ajax自动完成功能

1 个答案: