uModal is a powerful modal management tool with zero dependencies.
-
Download the latest version of uModal.
-
Add uModal to your page.
<head> ... <link rel="stylesheet" href="path/to/uModal.css"> </head> <body> ... <script src="path/to/uModal.min.js"></script> </body>
-
To create the most basic modal possible, simply use:
uModal.create("Modal title.", "Modal body.");
uModal provides a number of different modal types.
- Normal
- Warning
- Error
Define a modal type by using the following:
uModal.create(title, body, uModal.type.WARNING);uModal gives you complete control over a modal's buttons. Simply create an array of any buttons you wish to add.
var buttons = [
uModal.createButton("Ok")
];
uModal.create(title, body, uModal.type.NORMAL, buttons);By default, a button will close its parent modal when clicked. uModal allows you to change this by specifying a different action. A full list of available actions can be found here.
uModal.createButton("Close", uModal.buttonAction.CLOSE);If you need a little more flexibility, you can also use a function.
uModal.createButton("Help", showHelpFunction);
// or
uModal.createButton("Help", function(event) { ... });There are a number of options available to help customise your modals. Options can be defined using:
var options = {
closeOnBackgroundClick: true
};
uModal.create(title, body, uModal.type.NORMAL, buttons, options);The following options are available for use:
| Option | Type | Description |
|---|---|---|
closeOnBackgroundClick |
boolean | Closes the modal if the user clicks on the background. |
closeModalOnButtonClick |
boolean | Automatically closes the modal if a button is clicked. |