Disable background when div popup

StackOverflow https://stackoverflow.com/questions/23267119

  •  08-07-2023
  •  | 
  •  

Question

What I am trying to do is to show a div as a pop-up when I push a button and disable the background.

My pop-up is working perfectly fine but the problem comes when I try to disable the background. To do this, I make use of the div called 'mask' which must to take up all the body. This div must be hidden at the beginning and to show it when somebody push the button.

The thing is that this div (mask) is shown all the time, since the beginning.

I have been trying to find a solution in internet and I found, among others, the following links: CSS Disable background when div popup and disable background using css when popup appear

The first one doesn't have a solution and the solution of the second one doesn't fix my problem.

This is my .jsp file:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/popup.css" rel="stylesheet" type="text/css">

    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="js/popup.js"></script>
    </head>

    <body>
        <div id="pop">
            <div id="close">X</div>
            <div id="contentPop"></div>
        </div>

        <div id="mask">
            <div id="page-wrap">
                ...
                <a class="minibtn" onclick="show();">Show pop-up</a>
                            ...

            </div>
        </div>
    </body>

    </html>

I have omitted all the code that it is alien to the pop-up and I have replaced it for "...".

The popup.css file: 

#mask{
    z-index: 500;
    position: fixed;
    display: none; /* removes the element completely from the document, it doesn't take up any space. */
    /* visibility: hidden; -- hides the element, but it still takes up space in the layout. */
    background: transparent;
    background-color: #ccc;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;

}

#pop {
   z-index:2;
   position:absolute;
   border: 1px solid #333333;
   text-align:center;
   background:#ffffff;
}

#close {
   float:right;
   margin-right:5px;
   cursor:pointer;
   font:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   color:#FFFFFF;
   background-color:#666666;
   width:12px;
   position:relative;
   margin-top:-1px;
   text-align:center;
}

And the popup.js file: 

function show() {
    // Show pop-up and disable background using #mask
    $("#pop").fadeIn('slow');
    $("#mask").fadeIn('slow');
    // Load content.
    $.post("contentPopup.html", function(data) {
        $("#contentPop").html(data);
    });

} 

$(document).ready(function() {
    // Hide pop-up and mask
    $("#mask").hide();
    $("#pop").hide();


    // Size pop-up
    var img_w = 600;
    var img_h = 300;

    // width and height in css.
    $("#pop").css('width', img_w + 'px');
    $("#pop").css('height', img_h + 'px');

    // Get values ​​from the browser window
    var w = $(this).width();
    var h = $(this).height();

    // Centers the popup  
    w = (w / 2) - (img_w / 2);
    h = (h / 2) - (img_h / 2);
    $("#pop").css("left", w + "px");
    $("#pop").css("top", h + "px");

    // Function to close the pop-up
    $("#close").click(function() {
        $("#pop").fadeOut('slow');
        $("#mask").fadeOut('slow');
    });
});

Thank you very much for your time and help. If there is any doubt, just let me know and I will try to explain it in a better way.

Was it helpful?

Solution

There were two errors. You have used "Show popup" inside "mask" div that was displayed none. Second for close icon you have given "z-index:2", this should be greater than mask z-index to show in on top of mask

http://jsfiddle.net/5tFrg/

<pre>
    $(document).ready(function() {  
        $('.minibtn').click(function() {  
        // Show pop-up and disable background using #mask  
        $("#pop").fadeIn('slow');  
        $("#mask").fadeIn('slow');  
        // Load content.  
        $.post("contentPopup.html", function(data) {  
            $("#contentPop").html(data);  
        });  
        });  

        // Hide pop-up and mask
        $("#mask").hide();
        $("#pop").hide();


        // Size pop-up
        var img_w = 600;
        var img_h = 300;

        // width and height in css.
        $("#pop").css('width', img_w + 'px');
        $("#pop").css('height', img_h + 'px');

        // Get values ??from the browser window
        var w = $(this).width();
        var h = $(this).height();

        // Centers the popup  
        w = (w / 2) - (img_w / 2);
        h = (h / 2) - (img_h / 2);
        $("#pop").css("left", w + "px");
        $("#pop").css("top", h + "px");

        // Function to close the pop-up
        $("#close").click(function() {
            $("#pop").fadeOut('slow');
            $("#mask").fadeOut('slow');
        });
    });
</pre>

OTHER TIPS

have you tried to use display:none in your css instead of using the function hide() in jQuery, then after the $('#showBtn').click use your function show() and inside this function just go to your popup css and change the display to block and deactivate the backround.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top