Question

在我的bootstrap html页面上，我使用了div的淡入和淡出（j-Query函数）模式弹出窗口。

（我尝试使用bootstrap模式弹出窗口，但显示错误，说明'popover函数未知'。）

弹出窗口包含一个注册表单.Pop-up工作正常，弹出窗口中没有关闭按钮，所以我希望当用户点击正文中的任何位置时弹出窗口关闭，弹出窗口除外区域，我也想在显示弹出窗口时禁用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;        
    });

如何在弹出窗口中禁用html body并在文档单击时关闭弹出窗口

1 个答案: