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.)

  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.