Write Your Own Modal Window Script

ModalWindow’s are pretty popular things these days. And they aren’t very difficult to do. In-fact, I would have to say that they are easier to do by hand, then to do by JavaScript inclusion. That could depend on how complex of a Modal Window you are trying to make, but take a look at the following script. The number of problems to solve are not that cumbersome. With this, you can click here and get a pop up modal window. You can also add the modal source yourself, that way you can configure whatever HTML you would like inside of it, in this particular example, I am using jQuery DOM manipulation because I have this setup as a plugin for another site that I am working on. Just tag the “modalClick” class to the link and Enjoy!

Example Modal Window Link

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2. <script language="JavaScript" type="text/javascript">
  3. $(function() {
  4.         $("body").prepend("<div id=‘modalback’ style=‘display: none; position: absolute; width: 100%; height: 100%; background-image: url(/wp-content/uploads/2013/05/background.png); z-index: 1001;’></div>");
  5.         $("body").prepend($("<div id=‘modalsource’ style=‘display: none; cursor: pointer; position: absolute; z-index: 1002; width: 374px; height: 329px;’><img src=‘/wp-content/uploads/2013/05/countdown-modal2.png’ alt=‘Your Text’ /></div>"));
  6.         $("#modalback").css("height", $("body").outerHeight());
  7.         $("#modalsource").css("top", $(window).height() / 2 – $("#modalsource").height() / 2);
  8.         $("#modalsource").css("left", $(window).width() / 2 – $("#modalsource").width() / 2);
  9.        
  10.         $("#modalback").click(function() {
  11.                 $("#modalback").fadeOut(‘fast’);
  12.                 $("#modalsource").fadeOut(‘fast’);
  13.         });
  14.         $("#modalsource").click(function() {
  15.                 $("#modalback").fadeOut(‘fast’);
  16.                 $("#modalsource").fadeOut(‘fast’);
  17.         });
  18.  
  19.         $(".modalClick").click(function() {
  20.                 $("#modalsource").css("top", $(window).height() / 2 – $("#modalsource").height() / 2 + $("body").scrollTop());
  21.                 $("#modalback").fadeIn(‘fast’);
  22.                 $("#modalsource").fadeIn(‘fast’);
  23.         });
  24. });

About Phillihp Harmon

I'm Phillihp. My name can be spelled the same way forwards and backwards, so can my posts... if you wish. I'm out here exploring, learning, and sharing what I find. This is more for fun and personal growth, I aim to be as consistent as possible, so check back daily!
This entry was posted in **, Browsers, DIY, HTML5/CSS3, Internet, JavaScript. Bookmark the permalink.

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>