2014-03-06 2 views
1

내 부트 스트랩 html 페이지에서 페이드 인 및 페이드 아웃 (j- 쿼리 기능) div로 모달 팝업을 사용하고 있습니다. . 팝업에서 HTML 몸체를 비활성화하는 방법 및 문서 팝업창에서 팝업 닫기

는 (I는 부트 스트랩 모달 팝 오버를 사용하려고했으나 오류가 '팝 오버 기능이 알려져 있지 않다.'진술 나타났다),

팝업이 등록 form.Pop 업이 잘 작동이 포함되어있다 내 팝업 내에서 닫기 버튼이 아니므로 사용자가 팝업 영역을 제외한 본문 내의 아무 곳이나 클릭 할 때 팝업을 닫고 싶습니다. 또한 팝업이 표시 될 때 html 본문을 비활성화하려고합니다. 어디서나 HTML 본문 내에서 클릭 (즉 또한 팝업 영역을 포함!) 한마디로

, 내가 필요한 경우 팝업이 닫힙니다 나는 현재

: (1) 팝업 영역 내에서 클릭했을 때 팝업을 닫아서는 안됩니다. (2) 팝업이 표시되면 html-body의 링크 나 텍스트 상자에 액세스해서는 안됩니다. 이렇게 !!)

HTML :

<div class="form-group row "> 
      <section class="col-lg-6 col-md-6 col-xs-6"> 
       <label for="firstName ">First Name</label> 
       <input type="text" class="form-control create-form" id="firstname"> 
      </section> 
      <section class="col-lg-6 col-md-6 col-xs-6"> 
       <label for="LastName">Last Name</label> 
       <input type="text" class="form-control create-form" id="LastName"> 
      </section> 
     </div> 

JQuery와 :

 $(document).ready(function() { 
     $(document).click(function (e) { 
      var t = (e.target) 
      if (t != $("#popup_box").get(0) && 
      t != $("#popup_box").find('.create-form')) { 
       unloadPopupBox(); 
      } 
     }); 

     $('.container').click(function (e) { 

      var t = (e.target) 
      if (t != $("#popup_box").get(0) && t != $("#new-account").get(0)) { 
       unloadPopupBox(); 
      } 
      if (t != $(".navbar-toggle").get(0)) { 
       e.stopPropagation(); 
      } 
     }); 

     $('#new-account').click(function (e) { 
      loadPopupBox(); 
     }); 

     function unloadPopupBox() {  
      $('#popup_box').fadeOut("slow"); 
      $('.container').css({ 
       "opacity": "1" 
      }); 
     } 

     function loadPopupBox() { 
      $('#popup_box').fadeIn("slow"); 
      $('.container').css({ 
       "opacity": "0.5", 
       "z-index": "999" 
      }); 
     } 
    }); 

미리 감사드립니다.

답변

1

나는 이것이 당신을 도울 것이라고 생각합니다. Miduna..Your 대답 @

$("#popup_box").click(function (e) { 
     e.stopPropagation(); 
     return false;   
    }); 
+2

멋진 대답 ... –

+2

팝업이 @Midhuna –

+0

을 표시 될 때 아직도 내가 html로 몸을 해제하는 방법을 모른다 ... 내 첫 번째 문제를 해결하는 데 도움을 주었다. 그게 내가 찾는 가장 멋진 대답이었다. –