ajax autocomplete appears under modal pop up

Question

I have an Ajax autocomplete Textbox in modal and the problem that I have is the result appears under modal. How can I fix it

autocomplete result appears behind the modal

There is My JQuery Ajax Codes:

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 Code:

<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>

thank you in advance

Answer 1

I found the solution

z-index property of modal in bootstrap.css is 1050, and it's need to change z-index property of autocomplete answer to higher value like 2000. For this purpose , z-index property in "ui-front" class in jquery-ui.css effects on autocomplete answer. change it like this:

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