Creating A Flat Style Modal Window with jQuery plainModal Plugin

plainModal is a small and easy jQuery plugin to create cross-browser and customizable modal windows. In this post, we're going to creating a trendy flat style modal window with close button and a fullscreen overlay by using jQuery plainModal and CSS styles.

How to use it:

1. Create a button to toggle the modal window.

<div id="toggle-button">Open</div>

2. Create the content of your modal window.

<div id="demo">
<div class="plainmodal-close"></div>
Your Content Goes Here
</div>

3. The sample CSS to style the modal window.

<style>
.sample-window {
width: 350px;
padding: 5px;
border: 2px solid #186db4;
background-color: #fff;
display: none;
}
.plainmodal-close {
cursor: pointer;
}
.sample-window .plainmodal-close {
display: inline-block;
padding: 1px 3px;
color: #fff;
background-color: #224388;
}
.sample-window .plainmodal-close:hover {
background-color: #1f99e2;
}
#demo {
width: 450px;
padding: 20px 40px;
color: #fff;
background-color: #00aa6a;
border-radius: 10px;
display: none;
font-family: 'Georgia', serif;
}
#demo:after { /* clearfix */
content: "";
clear: both;
display: block;
}
#demo p {
font-size: 18px;
}
#demo .sample-head {
margin: 0 0 15px;
font-size: 36px;
font-weight: bold;
}
#demo img {
float: left;
margin-right: 10px;
box-shadow: none;
}
#demo .plainmodal-close {
position: absolute;
width: 45px;
height: 45px;
right: -15px;
top: -15px;
background: url('plainmodal-close.png') no-repeat;
}
#demo .plainmodal-close:hover {
background-position: -45px 0;
}
</style>

4. Include the jQuery javascript library and jQuery plainModal plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.plainmodal.js"></script>

5. Call the plugin.

$('#toggle-button').click(function() {
$('#demo').plainModal('open');
});

6. Methods.

// Show modal window. <div id="modal"> is styled via your CSS.
// element.plainModal('open'[, options])
$('#modal').plainModal('open');

// Let the modal window go under the overlay.
$('#modal').plainModal('blur'[, on[, duration[, complete]]])

// Hide modal window.
// element.plainModal('close')
$('#modal').plainModal('close');

// Initialize specified element as modal window.
// element.plainModal([options])
$('#modal').plainModal([options])

// Return the current option value (see Options) as optionName. 
// If newValue is specified, it is set before returning.
// currentValue = element.plainModal('option', optionName[, newValue])
currentValue = $('#modal').plainModal('option', optionName[, newValue])

7. Options.

$('#toggle-button').click(function() {
$('#demo').plainModal('open', {

// A number determining how long (milliseconds) the effect animation for showing and hiding the modal window will run.
duration:       200,

// An Object that can have open and close Functions for showing and hiding the modal window.
// These Functions are called with options.duration Number (see above) and complete Function.
// It's same to standard effect methods of jQuery (slideDown, slideUp, animate, etc.). 
// Therefore, those methods can be specified.
effect: {open: $.fn.fadeIn, close: $.fn.fadeOut},

// An Object that can have fillColor (fill-color), opacity and zIndex of the overlay.
overlay:{
  fillColor: '#000', 
  opacity: 0.3
},

// A child modal window or multiple child modal windows.
// A parent modal window is opened, and then a child modal window is opened. 
// Now, a child modal window is active and a parent modal window is blurred. 
// And when a child modal window is closed, a parent modal window is active again.
child: undefined,

// The only one modal window can open in the one window. 
// Therefore the open method is ignored when another modal window is already opened.
force: false,

// A z-index CSS property of the modal window. 
zIndex: 9999,

// If true is specified, the effects for showing and hiding the overlay are avoided.
fixOverlay:     false,

// If the element that has this class name is found, the close method is attached to click event of it.
closeClass:     'plainmodal-close',

// An Object that has left and top, relative to the view area.
offset: {
  left: 100, 
  top: 50
}
});
});

Change logs:

v1.0.0 (2017-04-04)

• JS update

v0.15.1 (2017-02-03)

• JS update

v0.15.0 (2015-09-16)

• Add: isChild

v0.14.5 (2015-06-29)

• Fix: 'from' is not set.
• Fix: min file is not updated.
• Fix: '$.extend' ignores 'undefined', 'option' method fails.
• Stop animations in `window.resize`.
• more strict exclusive control

v0.13.0 (2015-06-22)

• Add: `blur` method and `child` option.

v0.12.1 (2015-06-21)

• Skip editing window if possible.

v0.12.0 (2015-06-20)

• Add: `fixOverlay` option.

v0.11.0 (2015-04-04)

• Add 'option' method.

v0.10.0 (2015-03-30)

• Add from property.

v0.8.1 (2014-12-16)

• Add `options.force`, control fading, center position

v0.8.1 (2014-12-15)

• Call `options.offset` Function when window is resized. And add args and return value.

v0.7.0 (2014-12-06)

• Add custom events `plainmodalbeforeopen` and `plainmodalbeforeclose`

v0.6.4 (2014-11-02)

• Fix: touch devices scroll the window.

v0.6.2 (2014-09-15)

• Fix: The event handler by initialize is registered repeatedly.

v0.6.0 (2014-07-19)

• Rename options.overlay.color to options.overlay.fillColor.

v0.5.3 (2014-07-19)

• Fix: error by no `options`
• Change checking options

v0.5.1 (2014-07-15)

• Fix: "Stop" command is ignored.

v0.5.0 (2014-06-30)

• Add 'plainmodal-overlay' class..

v0.4.1 (2014-05-07)

• Fix: If options.duration is 0, the status become invalid.

v0.4.0 (2014-04-23)

• Add custom events plainmodalopen and plainmodalclose

v0.3.2 (2014-04-08)

• Thicken overlay as default. (color, opacity)

v0.3.1 (2014-03-10)

• Add options.zIndex and options.overlay.zIndex

v0.2.3 (2014-02-25)

• Enable Strict Mode

v0.2.2 (2014-02-16)

• Enable Strict Mode

---

This awesome jQuery plugin is developed by anseki. For more Advanced Usages, please check the demo page or visit the official website.