Question

我有一个Jquery模式，如果单击模态外的区域，我想阻止它关闭，我在Google上搜索了如何做到这一点没有成功。我怎样才能做到这一点？这是我的代码：

<!DOCTYPE html>
<html lang="en">
 <title>Popup Login and Register</title>
 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font- awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />

<body>
 <div class="container">
    <a id="modal_trigger" href="#modal" class="btn">Click here to Login or register</a>

   <div id="modal" class="popupContainer" style="display:none;">
    <header class="popupHeader">
        <span class="header_title">Login</span>
        <span class="modal_close"><i class="fa fa-times"></i></span>
    </header>

    <section class="popupBody">
        <!-- Social Login -->
        <div class="social_login">

            <div class="action_btns">
                <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
                <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
            </div>
        </div>          

    </section>
</div>
</div>

<script type="text/javascript">
    $("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
</script>

</body>
</html>

Answer 1

您必须取消绑定模式之外区域的click事件。这是代码。

$("#container").unbind('click');

而且，由于你的模态位于div容器中，所以你必须通过仅为你的模态绑定点击事件来使模态成为可点击的：

$("#modal").bind('click');

那就是它。

Answer 2

我找到了如何实现这一目标。我使用的是精益模态库（http://leanmodal.finelysliced.com.au/）。当模态打开时，会创建一个名为lean_overlay的div，它位于html页面上，因此它创建了一个很好的效果，允许您在后台查看html页面。

检查库时，我发现了点击lean_overlay div时触发的事件：

$("#lean_overlay").click(function(){close_modal(modal_id)}

所以我删除了那一行，现在单击lean_overlay div时没有任何反应，所以当你点击模态外部时，它就不会关闭。

如果在模态区域外单击，则防止模态退出

2 个答案: