Skip to content

Super Easy Modal Div

January 16, 2013
     
    .popupclass
    {     
        left: 50%;
        top: 50%;
        height: 170px;
        width: 300px;
        position: absolute;
        background-color: #333;
        border: 8px solid #444;
        color: White;
        padding: 12px;
        display: none;
        text-align: center;
        z-index: 50;
    }
    .backgroundclass
    {
        display: none;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        opacity: 0.6;
        filter: alpha(opacity=60); /* For IE8 and earlier */
        z-index: 25;
    } 
   
$(document).ready(function () {
   $(window).resize(function () {
      $('.popupclass').css({
         position: 'absolute',
         left: ($(window).width() - $('.popupclass').outerWidth()) / 2,
         top: ($(window).height() - $('.popupclass').outerHeight()) / 2
      });
   });
   $(window).resize();
});
function showModal() {
    $("#backgroundid").show()
    $("#popupid").show()
}
function hideModal() {
    $("#backgroundid").hide()
    $("#popupid").hide()
}
  
    <div id="backgroundid" class="backgroundclass" onclick="hideModal()">
    </div>
    <div id="popupid" class="popupclass">
    </div>
Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: