모달 팝업에서 아약스 자동 완성이 나타납니다

모달에 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로 코드 : : 어떻게 내 JQuery와 아약스 코드

autocomplete result appears behind the modal

있습니다

해결할 수

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

내가 해결책을 발견

출처

2017-03-11 Sina Riani

자동 완성 HTML의 CSS z-index 속성을 모달보다 크게 설정해야합니다. –

나는 중요한 태그로 자동 완성 답변의 모든 클래스를 만들었지 만이 방법은 효과가 없다. –

사전에 감사합니다

bootstrap.css에서 모달의 z- 색인 속성이 1050이고 자동 완성 답변의 z- 색인 속성을 2000과 같이 높은 값으로 변경해야합니다.이 목적으로 jquery의 "ui-front"클래스에있는 z- 색인 속성 자동 완성 응답에 -ui.css 효과. 다음과 같이 변경하십시오.

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

출처

2017-03-12 07:34:09

모달 팝업에서 아약스 자동 완성이 나타납니다

답변

관련 문제