CODEWITHSUNDEEP
javascriptjqueryhtml
Thoughtful Monkey
Thoughtful Monkey

Reputation: 668

div popup not working

What I am doing wrong? When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it. 

<html lang="en" class=" en">
<head>
    <title>My Test Popup</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <style type="text/css">
        .divtop
        {
            width: 800px; 
            height: 300px; 
            border:solid;
        }

        .divbottom
        {
            top: 400px; 
        }

        .localmenu {
            border: 1px solid black;
            background: #fff;
            margin-left : auto;
            top: 50px; width: 300px; 
            padding-top: 25px; 
            margin-top: 100px; 
            height: 150px;
        }

        .appContent{
            width: 800px; 
            border:solid;
            height: 600px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .maincontent{
            width: 100%;
        }

    </style>

</head>
<body>
    <div class="appContent" >
        <div class="maincontent" >
            <div class="divtop" >Top</div>
            <div class="divtop divbottom"  >Bottom</div>
        </div>
        <div id="popup" style="width : 100%; height: 600px;display: none;">
            <div class='localmenu'>
                Text in Div Popup<br/>                        
                <button id="btnHide">Close</button><br/>
            </div>
        </div>
    </div>

    <script>

        $(document).ready(function() {
            $('.divtop').click(function() {
                $('#popup').show().css("top", "500px").animate({top: 50}, 200);
                $('.mainContent').css("background-color", "grey");
            });

            $('#btnHide').click(function() {
                $('#popup').hide();
            });

        });

    </script>

</body>
</html>

Upvotes: 1

Views: 2479

Answers (4)

krishwader
krishwader

Reputation: 11371

To block the div tags at the back from being clickable:

Add a div with the following style in your HTML. Im gonna call it overlay.

.overlay {
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    opacity: .8;
    position: absolute;
    top: 0;
    z-index: 10000;
    display: none;
}

This will essentially cover up your page when shown up.

To center your popup:

I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)

#popup {    
    background: #fff;
    position :absolute;
    left : 40%;
    width : 300px;
    height: 600px;    
    height: 150px;
    display: none;
    z-index: 10001;
}

.localmenu
{
  border: 1px solid black;

}

Then, in your JS,

  • In your animate method, I changed 50px to 30% to center div#popup
  • Added code to hide and show .overlay along with #popup.

After the changes,

 $(document).ready(function () {
     $('.divtop').click(function () {
         $('#popup').show().css("top", "500px").animate({
             top: "30%"
         }, 200);
         $('.overlay').show();
     });

     $('#btnHide').click(function () {
         $('#popup,.overlay').hide();
     });

 });

Demo

http://jsbin.com/olasog/1

Code

http://jsbin.com/olasog/1/edit

Upvotes: 1

Sumurai8
Sumurai8

Reputation: 20737

To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.

Html:

<div id="popup">
  <!--// This is to stop the user from interacting with the content in the back
      // and to give a visual clue about that
  -->
</div>
<div class='localmenu'>
  <div>
    Text in Div Popup<br/>                        
    <button id="btnHide">Close</button><br/>
  </div>
</div>

<div class="appContent" >
  <div class="maincontent" >
    <div class="divtop" >Top</div>
    <div class="divtop divbottom"  >Bottom</div>
  </div>
</div>

CSS:

  //Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
  #popup {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    background: black;
    opacity: .5;
    top: 0;
    left: 0;
  }

  //This is just to be able to center the actual menu
    .localmenu {
        top: 20%;
        left: 0;
        width: 100%;
        position: fixed;
        height: 150px;
        display: none;
    }

  .localmenu > div {
        border: 1px solid blue;
        background: #fff;
        margin-left : auto;
        margin-right: auto;
        width: 300px;
        height: 150px;
  }

Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)

    $(document).ready(function() {
        $('.divtop').click(function() {
            $('#popup').show().animate(200);
            $('.localmenu').show();
            //$('.mainContent').css("background-color", "grey");
        });

        $('#btnHide').click(function() {
            $('#popup').hide();
            $('.localmenu').hide();
        });

    });

Upvotes: 1

Sergio
Sergio

Reputation: 28837

Fiddle

I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50. I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.

CSS

#popup {
    position:absolute;
    display: none;
    float: left;
    left:30%;
    z-index:1;
}
#popoverlay {
    position: fixed;
    display:none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

jQuery

$(document).ready(function () {
    $('.divtop').click(function () {
        $('#popoverlay').show();
        $('#popup').show().css("top", "500px").animate({
            top: "50px"
        }, 200);
        $('.mainContent').css("background-color", "grey");
    });

    $('#btnHide').click(function () {
        $('#popup').hide();
        $('#popoverlay').hide();
    });

});

HTML

<div class="appContent">
    <div class="maincontent">
        <div class="divtop">Top</div>
        <div class="divtop divbottom">Bottom</div>
    </div>
    <div id="popup">
        <div class='localmenu'>Text in Div Popup
            <br/>
            <button id="btnHide">Close</button>
            <br/>
        </div>
    </div>
</div>

Upvotes: 2

Manoj Yadav
Manoj Yadav

Reputation: 6612

Try this:

$(document).ready(function() {
    $('.divtop').click(function() {
        var div = $('.appContent');
        $('.localmenu').css({'margin': '200px auto'});
        $('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
        $('.mainContent').css("background-color", "grey");
    });

    $('#btnHide').click(function() {
        $('.mainContent').css("background-color", "");
        $('#popup').hide();
    });
});

Upvotes: 0

Related Questions