如何在彈出窗口中禁用html正文並關閉文檔中的彈出窗口點擊

Question

在我的引導html頁面上我使用了一個模式彈出式窗口，通過淡入和淡出（j-Query函數） 。

（我試圖用一個自舉模式酥料餅，但顯示的錯誤，說明「酥料餅的功能尚不清楚」。）

彈出包含註冊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" 
      }); 
     } 
    }); 

在此先感謝！

Answer 1

我認爲這會對你有幫助。

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