advanced code snippet search

Posted By

nerdfiles on 08/26/10


Tagged

javascript jquery Lightbox modal


Versions (?)

Quick Modal Windows in jQuery

 / Published in: JavaScript
 

For centering, you will want to combine the efforts of CSS Width, CSS Margin-Left and Absolute Positioning (50%). (Analogously with Height and Margin-Top.)

Expand | Embed | Plain Text 
  1. <!-- Markup -->
  2.  
  3. <h1 class="grid_13 omega">(dev) Modal Window Test</h1>
  4.  
  5. <div id="main-content" class="grid_9">
  6. <ul class="no-margin">
  7.     <li>
  8.         Initial MW should not be modal
  9.     </li>
  10.     <li><a id="trigger_1" href="" title="" class='modal_open:modal-window-1:{"css":{"background":"#c30","height":"300px","margin-left":"-230px","top":"160px","left":"50%"},"js":{"fadeSpeed":"fast","trulyModal":"false"},"content":{"windowTitle":"Meta title"}}'>Open Modal Window 1 (options set as <code>@class</code> metadata and loaded as JSON)</a> (fast, modal)</li>
  11.     <li><a id="trigger_2" href="" title="I have a title!" class='modal_open:modal-window-2'>Open Modal Window 2 (options pass'd as arguments)</a> (slow, not modal)</li>
  12. </ul>
  13. <div id="modal-window-1" class="modal-window-container grid_8 hide">
  14.     <div class="inner_2">
  15.         <div class="clearfix"><a href="" title="" class="modal-window-close modal-window-1 align-right">Close Window</a></div>
  16.         <h2 class="header_4">Address Verification</h2>
  17.         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed massa est, aliquam in adipiscing sit amet, tincidunt pellentesque ipsum.</p>
  18.         <form id="css-address-verification-form" name="" action="" method="post">
  19.             <ul class="no-margin clearfix tail_3">
  20.                 <li class="grid_4">
  21.                     <input type="radio" class="radio" value="" id="css-original-address" name="" />
  22.                     <label for="css-original-address">Original Address</label>
  23.                     <div class="adr indent-5">
  24.                         <div class="street-address">1021 Main St.</div>
  25.                         <div class="extended-address">Suite NN</div>
  26.                         <span class="locatity">Houston</span>
  27.                         <span class="region">TX</span>
  28.                         <span class="postal-code">77002</span>
  29.                         <div class="country-name">United States</div>
  30.                     </div>
  31.                 </li>
  32.                 <li class="grid_4">
  33.                     <input type="radio" class="radio" value="" id="css-best-match-address" name="" />
  34.                     <label for="css-best-match-address">Best Match</label>
  35.                     <div class="adr indent-5">
  36.                         <div class="street-address">1021 Main St.</div>
  37.                         <div class="extended-address">Suite NN</div>
  38.                         <span class="locatity">Houston</span>
  39.                         <span class="region">TX</span>
  40.                         <span class="postal-code">77002</span>
  41.                         <div class="country-name">United States</div>
  42.                     </div>
  43.                 </li>
  44.             </ul>
  45.         </form>
  46.         <a href="" title="" class="button-link">Continue</a>
  47.         <a href="" title="" class="modal-window-close modal-window-1">Cancel</a>
  48.     </div>
  49. </div>
  50. <div id="modal-window-2" class="modal-window-container grid_8 hide">
  51.     <div class="modal-window-title">Title</div>
  52.     <div class="inner_2">
  53.         <div class="clearfix"><a href="" title="" class="modal-window-close modal-window-1 align-right">Close Window</a></div>
  54.         <h2 class="header_4">jQuery Modal Window</h2>
  55.         <p>Loads of fun with jQuery!</p>
  56.     </div>
  57. </div>
  58.  
  59. </div><!-- #main-content -->
  60.  
  61. <div id="right-rail" class="grid_4 omega">
  62.     <p>Right Rail</p>
  63. </div><!-- #right-rail -->
  64.  
  65. <!-- CSS (not tested in IE6) -->
  66.  
  67. #overlay {
  68.    position: absolute;
  69.    height: 100%;
  70.    width: 100%;
  71.    background: #000;
  72.    top: 0;
  73.    left: 0;
  74.    z-index: 9000; }
  75. .modal-window-container {
  76.     position: absolute;
  77.     top: 50%;
  78.     left: 50%;
  79.     background: #fff;
  80.     z-index: 9001; }
  81.  
  82. <!-- JavaScript -->
  83.  
  84. ;(function($) {
  85.  
  86.     // modal window plugin
  87.     $.modalWindow = function(options_args) {
  88.  
  89.         var undefined = "undefined",
  90.             mw = this;
  91.  
  92.         mw.elem_container,
  93.         mw.content_settings,
  94.         mw.css_settings,
  95.         mw.js_settings;
  96.  
  97.         function sparkModal(elem_container, css_settings, js_settings, content_settings) {
  98.             if (js_settings.onPageLoad === true && js_settings.animateOverlay !== true) {
  99.                 $('<div id="overlay" />').appendTo("body")
  100.             } else {
  101.                 $('<div id="overlay" class="hide" />')
  102.                     .appendTo("body")
  103.                     .fadeIn(js_settings.fadeSpeed.toString())
  104.                     .removeClass("hide");
  105.             }
  106.  
  107.             elem_container.find(".modal-window-title").text(content_settings.windowTitle);
  108.  
  109.             elem_container
  110.                 .css(css_settings)
  111.                 .fadeIn(js_settings.fadeSpeed.toString())
  112.                 .removeClass("hide");
  113.  
  114.             mw.elem_container = elem_container;
  115.             mw.content_settings = content_settings;
  116.             mw.css_settings = css_settings;
  117.             mw.js_settings = js_settings;
  118.         }
  119.  
  120.         $("#overlay,.modal-window-close").live("click", function(e) {
  121.  
  122.             if ( (mw.js_settings.trulyModal !== true && mw.js_settings.trulyModal !== "true") || $(this).hasClass("modal-window-close") ) {
  123.                 $(".modal-window-container").fadeOut();
  124.                 $("#overlay").fadeOut().queue(function() {
  125.                     $("#overlay").remove();
  126.                     $("#overlay").dequeue();
  127.  
  128.                     // reset container
  129.                     mw.elem_container
  130.                         .addClass("hide")
  131.                         .attr("style", "");
  132.                 });
  133.             }
  134.  
  135.             e.preventDefault();
  136.  
  137.         });
  138.  
  139.         return {
  140.  
  141.             sparkModal: sparkModal,
  142.  
  143.             triggers: $("a[class^='modal_open']").each(function(index, e) {
  144.  
  145.                 // trigger
  146.                 var trigger = $(this),
  147.  
  148.                     // trigger id
  149.                     trigger_id = trigger.attr("id"),
  150.  
  151.                     // defaults
  152.                     options_defaults = {
  153.                         css: {
  154.                             "background":"orange",
  155.                             "position":"absolute",
  156.                             "top":"50%",
  157.                             "left":"50%",
  158.                             "height":"300px",
  159.                             "margin-left":"-235px",
  160.                             "margin-top":"-150px"
  161.                         },
  162.                         js: {
  163.                             fadeSpeed: "defaults",
  164.                             trulyModal: true,
  165.                             onPageLoad: true
  166.                         },
  167.                         content: {
  168.                             windowTitle: "Modal Windows!"
  169.                         }
  170.                     },
  171.  
  172.                     // get @class of trigger elem
  173.                     class_val = trigger.attr("class") || "",
  174.  
  175.                     // extract elem container name
  176.                     // if no name specified on any anchor, plugin
  177.                     // should find arbitrary container and load it on page load
  178.                     find_elem = class_val.match(/:([A-Za-z0-9-]+)(:|)/),
  179.  
  180.                     // find matching content container defined in trigger
  181.                     elem_container = (find_elem) ? $("#"+find_elem[1]) : $("#modal-window-1"),
  182.  
  183.                     find_class_metaoptions = class_val.match(/{(.*)}/) || {},
  184.  
  185.                     // pull settings from trigger
  186.                     options_meta = $.parseJSON(find_class_metaoptions[0]) || {};
  187.  
  188.                 trigger.bind("click."+trigger_id, function(e) {
  189.                     // apply css and js or set defaults
  190.                     var css_settings = options_meta.css || options_args.css || options_defaults.css,
  191.                         js_settings = options_meta.js || options_args.js || options_defaults.js;
  192.                         content_settings = options_meta.content || options_args.content || options_defaults.content;
  193.  
  194.                     sparkModal(elem_container, css_settings, js_settings, content_settings);
  195.  
  196.                     e.preventDefault();
  197.                 });
  198.  
  199.             })
  200.         };
  201.  
  202.     }; // $.modalWindow
  203.  
  204. })(jQuery); 
  205.  
  206. <!-- Invoking -->
  207.  
  208. jQuery(function($) {
  209.  
  210.     // testing with args
  211.     $.modalWindow({ //arguments as defaults for all windows
  212.         css: {
  213.             "background":"#fff",
  214.             "position":"absolute",
  215.             "top":"50%",
  216.             "left":"50%",
  217.             "width":"200px",
  218.             "height":"200px",
  219.             "margin-left":"-100px",
  220.             "margin-top":"-100px"
  221.         },
  222.         js: {
  223.             fadeSpeed: "slow",
  224.             trulyModal: true,
  225.             onPageLoad: false,
  226.             animateOverlay: true
  227.         },
  228.         content: {
  229.             windowTitle: "mmmmodwdawdaal!"
  230.         }
  231.     }).sparkModal($("#modal-window-1"), { // onload window
  232.             "background":"#fff",
  233.             "position":"absolute",
  234.             "top":"50%",
  235.             "left":"50%",
  236.             "width":"200px",
  237.             "height":"200px",
  238.             "margin-left":"-100px",
  239.             "margin-top":"-100px"
  240.         }, {
  241.             fadeSpeed: "slow",
  242.             trulyModal: true,
  243.             onPageLoad: false,
  244.             animateOverlay: true
  245.         }, {
  246.             windowTitle: "onload!"
  247.     });
  248.  
  249. });

Report this snippet  

You need to login to post a comment.