Creating A Flat Style Modal Window with jQuery plainModal Plugin
File Size: | 25.6 KB |
---|---|
Views Total: | 11926 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.