🌓

Simplest Modal Window (less than 1KB) – jQuery Plugin Following my jQuery minimal plugin series I’ve now built a very functional and minimal jQuery plugin to create modal windows on the go, it weights exactly 572 Bytes (0.6KB). The modal windows have a slick design using a white rounded border square with a fine shadow: The CSS style is fully customizable, only 8 properties used […]

by
on March 16, 2012
(2 minute read)

Following my jQuery minimal plugin series I’ve now built a very functional and minimal jQuery plugin to create modal windows on the go, it weights exactly 572 Bytes (0.6KB). The modal windows have a slick design using a white rounded border square with a fine shadow:

Simple Cloud Hosting Built for Developers

Simple jQuery Modal Window Plugin

The CSS style is fully customizable, only 8 properties used by default and you can modify most of them to customise it your way.

The script is unobtrusive and has a high-performance, meaning it only loads and modifies the DOM when required and it unloads everything completely when the modal window is closed. Closing the modal window can be done by either clicking outside of the window or by clicking any .mw_close element in the window content.

Download Simple Modal Window jQuery Plugin

Copy and paste this code below. Yes, ALL the plugin is in this small piece of code, you should just add it into a JavaScript file you have or directly into the page (inside the jQuery wrapper).

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) https://xaviesteve.com/?p=3054 */function mw_close(){$("#mw_win,#mw_mask,#mw_style").remove()}function mw_load(a){mw_mask="background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;";mw_win="background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;";$("head").append('<style id="mw_style">#mw_mask{'+mw_mask+"}#mw_win{"+mw_win+"}</style>");$("body").append('<div id="mw_mask"></div><div id="mw_win">'+a+"</div>");$("#mw_mask,.mw_close").unbind("click").bind("click",function(){mw_close()})}

Here’s the code without minifying:

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) https://xaviesteve.com/?p=3054 */
$(function() {
  /* Modal window script in 9 lines */
  function mw_load(html) {
    mw_mask = 'background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;';
    mw_win = 'background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;';
    $('head').append('<style id="mw_style">#mw_mask{'+mw_mask+'}#mw_win{'+mw_win+'}</style>');
    $('body').append('<div id="mw_mask"></div><div id="mw_win">'+html+'</div>');
    $('#mw_mask,.mw_close').unbind('click').bind('click', function() {mw_close();});
  }
  function mw_close() {$('#mw_win,#mw_mask,#mw_style').remove();}

Simple Cloud Hosting Built for Developers

You can load a new Modal Window through JavaScript by using this function:

mw_load('<p>Lorem ipsum dolor sit <a href="#" class="mw_close">amet</a>.</p>');

If you have any issues please let me know, note that the plugin’s purpose is to simply work, fancy features and extras should be coded apart specifically for your projects. The plugin requires jQuery and it hasn’t been tested in IE6.

Free 100% online banking account

💳 Get your free debit Mastercard

No comments yet

Treasure Chest

Get notified of new projects I make
Usually one email every 3 months

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));*/ /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();