CODEWITHSUNDEEP
jquerymodal-dialog
Vito
Vito

Reputation: 728

Prevent modal from exit if clicked outside modal area

I have a Jquery modal and I want to prevent it from closing if the area outside the modal is clicked, I searched on Google how to do it without success. How can I do this? here is the code that I have:

<!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>

Upvotes: 0

Views: 1973

Answers (2)

Vito
Vito

Reputation: 728

I found how to achieve this. I was using a lean modal library (http://leanmodal.finelysliced.com.au/). When the modal opens, a div called lean_overlay is created, which is upon the html page, so it create that nice effect that allows you to see the html page at background.

Checking the library, I found an event that is triggered when that lean_overlay div is clicked:

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

So I deleted that line, and now nothing happens when clicking the lean_overlay div, so in that way when you click outside the modal, its not closed.

Upvotes: 0

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

You have to unbind the click event for the area outside of your modal. Here's the code for it.

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

And, as your modal is inside the div container so you have to make modal as clickable by binding click event only for your modal as:

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

That's it.

Upvotes: 2

Related Questions