CODEWITHSUNDEEP
javascriptjqueryhtmlcsspopup
Saravanan M P
Saravanan M P

Reputation: 641

Disable the popup background

here my code is:

<script src="http://code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#pop").click(function(){             
            $("#overlay_form").fadeIn(1000); 
            positionPopup(); 
        }); 
        function positionPopup()
        {
            if(!$("#overlay_form").is(':visible')){
                return;
            }
            $("#overlay_form").css({
                left: ($(window).width() - $('#overlay_form').width()) / 2,
                top: ($(window).width() - $('#overlay_form').width()) / 7,
                position:'absolute'
            });
        }
        $(window).bind('resize',positionPopup);
    </script>
    <style>
        #overlay_form{position: absolute;border: 5px solid gray;padding: 10px;background: white; width: 380px;height: 120px;border-radius:20px;}
    </style>
    <div id="overlay_form" style="display:none;">
        <p>hello</p>
    </div>

I need to disable background click events.

Upvotes: 1

Views: 964

Answers (3)

Alex Art.
Alex Art.

Reputation: 8781

inside click handler:

$("#pop").click(function(event){
     event.stopPropagation();
     event.preventDefault();
});

Upvotes: 1

Sanjeevi Rajagopalan
Sanjeevi Rajagopalan

Reputation: 232

You can do this by covering the entire page with an overlay just below your popup. Add this code just before you open your popup.

$("body").append('<div class="modalOverlay">');

and css

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}

Then When you close your popup window just remove this div from page.

Upvotes: 0

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5301

$("#overlay_form").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

Upvotes: 0

Related Questions