https://github.com/mbuczko/simplemodal-jquery

jQuery plugin to create modal windows
https://github.com/mbuczko/simplemodal-jquery

Last synced: 15 days ago
JSON representation

jQuery plugin to create modal windows

• Host: GitHub
• URL: https://github.com/mbuczko/simplemodal-jquery
• Owner: mbuczko
• Created: 2011-11-10T13:19:03.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2024-03-06T16:18:02.000Z (10 months ago)
• Last Synced: 2024-03-06T18:15:59.167Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 292 KB
• Stars: 52
• Watchers: 6
• Forks: 18
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Modal - A simple modal window

===========================================

SIMPLE MODAL is a small plugin for jQuery to create modal windows. It's heavily based on SIMPLE MODAL for Mootools (http://simplemodal.plasm.it/)

It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.

SIMPLE MODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.

Here is a [nice demo](https://labs.buczko.pl/simplemodal-jquery/Demo/).

How to Use

----------

Minimal configuration

ALERT INTEGRATION 

-----------------

Snippet code Javascript:

```javascript	

	$("#myElement").click(function() {

	      $.fn.SimpleModal({

                btnOk:    "Alert button",

                title:    "Title",

	            contents: "Your message..."

	      }).showModal();

	});

```

Snippet code HTML:

```html	

	Alert

```

MODAL-AJAX INTEGRATION

----------------------

Snippet code Javascript:

```javascript

	$("#myElement").click(function() {

        $.fn.SimpleModal({

            model: "modal-ajax",

            title: "Title",

            param: {

                url: "file-content.php",

                onRequestComplete: function() { /* Action on request complete */ }

            }

        }.addButton("Action button", "btn primary", function() {

            this.hide();

        }).addButton("Cancel", "btn").showModal();

	});

```

Snippet code HTML:

```html

	Open Modal

```