SimpleModal is a lightweight framework jQuery plugin to create feature-rich modal dialog windows. It has predefined Alert, Confirm, and Prompt dialog windows, with animation effects.
SimpleModal provides also a powerful interface for Custom Modal dialog development for your web pages. Has a clear and simple API, and can also be used to display Images Gallery with LightBox effect (see example at the bottom of this page, also in the archive with this script).
- Can open multiple linked modal windows.
- Has built in CSS styles with a minimal code that can easily be edited /changed.
• To DOWNLOAD this script, click: - version: 1.4.5 (750 KB).
Installation
1. First, to use this plugin, copy the "jqmodal" folder with all its files on your server. The script comes with jQuery 1.10.2 ("jquery.js" in "jqmodal/" directory).2. Include these files in the <head> zone of your web page: SimpleModal css styles, jQuery library, the SimpleModal jQuery plugin.
<link rel="stylesheet" type="text/css" href="jqmodal/simplemodal.css" /> <script type="text/javascript" src="jqmodal/jquery.js"></script> <script type="text/javascript" src="jqmodal/jquery.simplemodal.js"></script>3. Then, create the HTML and JavaScript code to build and open your modal windows.
<script> var win_cnt = '<div>Content</div>'; // Defines the content $.modal(win_cnt); // opens the modal box </script>• More details about SimpleModal options are in the "Readme.htm" file, in the archive with this script.
Examples SimpleModal Windows
Here is a few examples with SimpleModal jQuery plugin.1. Simple Alert dialog box.
- Code:
<button id="smodal1">Test Alert</button>
<script>
var message = 'Resource from: https://coursesweb.net/';
$('#smodal1').click(function(e) {
// calls modal alert() method, with the message
$.modal.alert(message);
});
</script>
2. Confirm dialog box, with a callback function: .- Code:
<button id="smodal2">Test Confirm</button>
<script>
var message = '<strong>Do you like this jQuery plugin?</strong>';
$('#smodal2').click(function(e) {
// calls modal confirm() method, with the message and a callback function that is executed when the Confirm window is closed
// if the user clicks "yes", val is true, if clicks "no", val is false
$.modal.confirm(message, function(val){
if(val == true) return alert('Thank You');
else return alert('Try make a better one');
});
});
</script>
3. Prompt dialog box, with a callback function: .- Code:
<button id="smodal3">Test Prompt</button>
<script>
var message = 'Who are .. You?';
$('#smodal3').click(function(e) {
// calls modal prompt() method, with the message and a callback function that is executed when the prompt window is closed
// if the user clicks "OK", val is the value added in input field, if clicks "Cancel", val is false
$.modal.prompt(message, function(val){
if(val === false) return alert('GOoD');
else if(val == '') return alert('GOoD no person');
else return alert(val +' - Have a GOoD life.');
});
});
</script>
Advanced
4. In the following example we have 3 linked modal windows [see the comments in code].First, the button accesses a function that opens a custom modal box with HTML content, and two buttons: Cancel, and Next. When the Next button is clicked, another function opens a Confirm modal window, then, it is opened an Alert modal window.
- Code:
<button id="smodal4">Demo</button>
<script>
// defines a function that build a modal window. Receives the content
var modalW1 = function(content) {
// calls the modal() method with the content, and an object with options
$.modal(content, {
autoResize: true, // allows to Resize the container
overlayClose: true, // closes the dialog window when click out of it
closeHTML: '', // to not add predefined close button (we add as Cancel in content)
closeClass: 'close_modal', // changes the css class for Close button (we add it to Cancel)
// when this modal window is displayed,
// register click to "next_modal" button to call the modalW2(), that opens another modal window
onShow: function(data){
data.container.find('.next_modal').click(function(e){ modalW2(); });
}
});
}
// defines a function that opens a confirm modal window
var modalW2 = function() {
// calls the modal.confirm() method with the message, and a callback function thast opens a modal Alert
$.modal.confirm('<strong>Do you like this jQuery plugin?</strong>', function(val){
if(val == true) return $.modal.alert('<strong>Thank You</strong>');
else return $.modal.alert('<strong>Try make a better one</strong>');
});
}
// content for the first modal window, and two HTML elements for Cancel and Next buttons (styled in css)
var win_cnt = '<h4>First Modal Window</h4>\
<img src="image_gallery/imgs/waterfall.jpg" alt="Img" width="250" height="190" /><br/>\
- Click out of this box, or the Cancel button to close this window.<br/>\
- Click the Next button to open the Next Window.\
<div class="buttons"><span class="close_modal">Cancel</span> <span class="next_modal">Next -></span></div>';
// Calls modalW1(), passing win_cnt, on click the button
$('#smodal4').click(function (e) {
modalW1(win_cnt);
return false;
});
</script>
5. Here is an example with an image gallery created with SimpleModal jQuery plugin. The images are displayed with LightBox effect.
- The files and the code of this example are in the archive with this plugin.
Click on images:
• The SimpleModal Dialogs home page is at: http://www.ericmmartin.com/projects/simplemodal/