Sonntag, 20. Juni 2010

MicroModal

INFO: Take a look at my microUI website template. It contains the newest version of MicroModal and lots of other nice goodies!

MicroModal can be used to display a modal window on click. Useful scenarios include: "Are you sure you want to ...?", "Please enter ...!", and so on.

This isn't one of those huge modal scripts with CSS files and fancy graphics - if you want it fancy, use (or wait for) CSS3. This solution is fat-free.

Screeshot


Demonstration
Check out the demonstration here.

Example
The JavaScript
$('.micromodal').microModal({
    autoPositioning: true, // set true if you wish to center the modal window (default: true)
    overlay: {
        show: true,        // set true if you wish to how an overlay (default: true)
        color: '#fff',     // set the colour of the overlay (default: '#fff')
        opacity: 0.8       // set the opacity of the overlay (default: 0.8)
    }
});

The Html
<button class="micromodal target-changecolor">Let's change the background colour!</button>
  
<div id="changecolor" class="dialog">
 Do you really want to do this?
 <br /><br />
 <button onclick="$.fn.microModal.dialogs['#changecolor'].close();">No way!</button>
 <button onclick="$('body').css('background-color', '#fedcba');$.fn.microModal.dialogs['#changecolor'].close();">Sure</button>
</div>

The Css - if you don't know what to do yourself - find another JQuery Plugin ;-)

Download
Source Code
Compressed Code (for use in productive environment)

8 Kommentare:

  1. Thanks mate, not been jquery plugins that i really use, but this has saved me hiring a developer as i don't understand jquery all that well as of yet, appreciate your good work :)

    Cheers

    AntwortenLöschen
  2. You're welcome!

    Btw: The upcoming vBulletin 4.0.4 style in white looks quite nice.

    AntwortenLöschen
  3. I'm updated your micromodal module for support onShow event (custom function invocation).
    Without it I can't add ajax file upload functionality to the modal window.

    If you interesting in my patch please knock me at alex<@>dederer.ru

    AntwortenLöschen
  4. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  5. Just one idea, hope might help somebody: it will be good to add the code to fire the onOpen or whatever event which will run when the modal will be shown. To make this work one way is to add to the function:

    var dialog = function(_content ...

    the one line of code just before the closing }:

    eval('if (typeof onOpen'+content.attr('id')+' == "function") { After'+content.attr('id')+'Open(); }');

    And this will check if the function onOpen_name_of_modal_form() exist and if so will run it.

    AntwortenLöschen
  6. Oh, proper code line should look:

    eval('if (typeof onOpen'+content.attr('id')+' == "function") { onOpen'+content.attr('id')+'(); }');

    AntwortenLöschen
  7. how to use this plugin ?
    can u provide an example

    AntwortenLöschen
  8. Hey anonymous, check out the demonstration. Everything can be seen there.

    AntwortenLöschen

Socialize!