lolbox
A basic jQuery modal plugin
See a demo - https://danjohnson95.github.com/lolbox/
Source Code
The unminified source code can be found in /src. The main JS file is here - https://github.com/danjohnson95/lolbox/blob/master/src/js/lolbox.js
This repo uses Gulp to compile SCSS and minify files.
Installation
Download lolbox.css and lolbox.js, and place them in your project.
<link rel="stylesheet" href="lolbox.css"> <script src="lolbox.js"></script>This plugin requires jQuery, so make sure you've included jQuery before including the lolbox.js file.
Usage
Lolbox will open when initialised.
$(document).lolbox();Options
There are multiple options you can pass through to customise your modal.
var opt = { contents: "Your modal body goes here", zindex: 1234, // Incase you want to manually specify the z-index ajax: { // If your modal needs to grab content via ajax, use: true, url: '/file.php', // the file where your contents are located method: 'get', // the HTTP method to use dataType: 'json', // the dataType you're expecting data: {key: value}, // any data you need to pass callback: function(){ // incase you want to call something once AJAX is complete }, head: { use: true, // If you want the header to show close: true, // If you want the top right close button to show title: 'Lolbox Title', // The modal title }, foot: { use: true, // If you want to display a footer close: { use: true, // If you want to display a close button on the footer text: 'Close', // The text to be used on the footer close button callback: function(){ // incase you want to call something when the close button is clicked } }, conf: { use: true, // If you want a confirmation button on the footer text: 'Save Changes', // The text to be used on the footer confirm button callback: function(){ // incase you want to call something when the confirm button is clicked } } } }; $(document).lolbox(opt);