모달에서만 배경을 제거하는 방법

Question

현재 트위터 부트 스트랩을 사용하고 있으며 최근에는 모달을 닫을 때 배경이 닫히지 않는 문제가있었습니다.

$('.modal-backdrop').hide(); 

이 솔루션의 문제는, 그것은 전체 페이지에서 배경을 제거합니다

함께 해결. 페이지가 일부 기능을로드 할 때도 필요하기 때문에 사용자는이 과정에서 필드를 확인하거나 선택 취소하지 않습니다.

<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog "> 
      <!-- Modal content--> 

      <div class="modal-content"> 
       <div class="modal-header"> 
        <asp:HiddenField ID="hfImg" runat="server" /> 
       </div> 
       <div class="modal-body" style="overflow: auto; align-content: center;"> 
        <div class="col-sm-12"> 

         <div id="views"></div> 

        </div> 
       </div> 
       <div class="modal-footer"> 
        <div class="row"> 
         <div class="col-sm-12"> 
          <div class="col-sm-1 pull-left"> 
           <button type="button" class="btn btn-primary" data-dismiss="modal";">Cancelar</button> 
          </div> 
          <div class="col-sm-1 col-sm-offset-8"> 
           <button id="cropbutton2" class="btn btn-primary pull-right" type="button" onclick="applyCrop();">Cut</button> 
          </div> 
          <div class="col-sm-1 col-sm-offset-1"> 
           <asp:Button runat="server" CssClass="btn btn-primary pull-right" ID="save" Text="Edit" OnClick="btnEdit_Click" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

C#을 저장 버튼 뒤에 : 다음 CloseModal()에 대한

 btnEdit_Click(object sender, EventArgs e) 
    { 
     ... 
     ... 
     ... 
     ... 
     ... 
     ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "modal", "closeModal();", true); 
     } 

그리고 자바 스크립트 :

 function closeModal() { 
     $('.modal-backdrop').hide(); 
     $('body').removeClass('modal-open'); 
     $('#myModal').modal('hide'); 
     $('#<%=hfImg.ClientID%>').val(""); 
    } 

수있는 사람의 도움을 모달의 코드 아래

나,이 프레임 워크에 대한 많은 경험이 없으며 적절한 방법으로이 작업이 수행되고 있는지도 모릅니다.

시 :이 페이지는 ASCX에게 있습니다

편집 : 내가하고 있어요 이 프로젝트는 오래되어 내가 그것을 개발하는 과정에서 작동하지 않았다.

하지만 지금은 조금만 지원하고 유지 관리하고 있습니다. 아키텍처 문제가 있습니다. 원래의 devs는 페이지가 항상 클라이언트 제어 구조에서 수행하는 전체 포스트 백과 함께 작업 영역을 만들려고 시도하여 업데이트 패널 내부의 모든 컨트롤을 만듭니다.

관련 기술 (Ajax 등)으로 인해 사용자 클라이언트가 무언가를 점검하거나 선택 취소 할 때마다 전체 포스트 백을 수행하거나 다른 탭의 하위 메뉴를 열지 않기를 원했습니다. 따라서 페이지가 업데이트 패널에 거의 업데이트되지 않는 것처럼 보이게 만들었습니다.

배경 화면은 이러한 목적으로 마스터에 정의되어 있습니다.

아무 것도 변경할 때마다 (페이지를 닫는 것을 포함하여) 페이지가 포스트 백을 가져 오기 때문에 내 부트 스트랩이 이전에 참조했던 실제 객체에 대한 참조가 손실됩니다. 따라서 모달 배경에서 .hide 또는 .remove를 수행하면 부트 스트랩은 실제로 찾을 수있는 유일한 참조를 목표로하므로 마스터 페이지에서 정의됩니다.

우리가 처리 할 수있는 것보다 훨씬 많은 작업과 시간이 필요하기 때문에 모달 마크 업에 data-backdrop : false를 사용하여 모달을 배경으로 두지 않기로 결정했습니다.

도움을 주신 모든 분들께 감사드립니다. .`만 추가,

Answer 1

간단한이 모델 또는

$("#myBtn2").click(function(){ 
    $("#myModal").modal({backdrop: false}); 
}); 

here를 트리거 버튼을 data-backdrop="false"을 넣어

가