CSS jQuery Simple Modal Window

Hello, welcome, and welcome back to those who have came before. I am going to go over a simple technique to create a modal window that i have personally tested in Internet Explorer, Firefox, Safari, and Google Chrome. Its mostly CSS but we use jQuery to toggle the show/hide of the modal windows. Its really clean and simple but it has some neat CSS3 goodies such as rounded corners and a drop shadow effect. Play with its settings a little bit and you will learn how it works easily. It opens dead center of the screen with absolute positioning and it wouldn’t be hard to adapt more functionality like making it drag capable or adding a title bar.

CSS:

.modal { opacity:0.97;
         filter:alpha(opacity=97); /* For IE8 and earlier */ -moz-border-radius: 5px;
         border-radius: 5px; 
         border: 1px solid #000; 
         z-index: 999; 
         display:none; 
         position: absolute; 
         left: 40%; 
         top: 40%; 
         padding: 20px; 
         height: 250px;
         width: 500px;
         background-color: #f7f7f7; 
         width: 400px;
         -moz-box-shadow: 15px 15px 40px #000;
         -webkit-box-shadow: 15px 15px 40px #000;
         box-shadow: 15px 15px 40px #000;
         /* For IE 8 */
         -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000')";
         /* For IE 5.5 - 7 */
         filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000');
}

HTML:

<a id="clickme" href="javascript:;">Click me to show modal</a>

So, at this point our CSS is setup and our HTML is there but by default CSS says “display:none;” so our div is hidden initially. So in order to trigger our modal window, I chose to use jQuery. You can get the latest jQuery release at http://www.jquery.com. We are going to bind a click event to the element with the id of “clickme”.

jQuery:

$(document).ready(function() {

    $("#clickme").live('click',function() {

        $(".modal").slideToggle();

    });

});

So here we have bound clickme to show our modal window using the slide animation effect.

Now, there are some cross version issues in jQuery for .live. If you are using the latest 1.9 jQuery then you will have to use .on instead of live i believe.

2 Responses to CSS jQuery Simple Modal Window

  1. thanks you so much, its very simple and work in my blog, but how to add CLOSE button?

    • Ana,

      Glad it worked for you. So inside your .modal div, if you have a close button, it would need the following:

      So we have a “closeModal” button and then in query:

      $(“#closeModal”).live(‘click’,function() {
      $(“.modal”).slideToggle();
      });

      Something like that should work.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>