unmodal

Features

• Keeps elements in place. Moving elements out of their place can be a pain.
• Keyboard friendly . You can always get out of the modal by pressing escape.
• CSS Styling. You can use CSS transitions and style as much or as little as you'd like.

View Project On Github Just the JavaScript, Please

Usage

Trigger unmodal on a jQuery as you would with other plugins. There are a few extra options you might want to be aware of.

Include CSS

Before you start, include some CSS to style the boxes:

    <style type='text/css'>
    
      .unmodal {
        background: #000;
        opacity: .5;
        filter: alpha(opacity = 50);
      }
      
    </style>

Or, if you want to get fancy (like on this page), use CSS transitions:

    <style type='text/css'>
      .unmodal {
        background: #000;
        opacity: .5;
        filter: alpha(opacity = 50);
        -webkit-transition: opacity linear .3s;
        -moz-transition: opacity linear .3s;
        transition: opacity linear .3s;
      }
      .unmodal.unmodal-hidden {
        opacity:0;
      }
    </style>

$.unmodal

    // This will automatically black out everything except for all divs.
    // Notice that it does work even with more than one element
    $("div").unmodal(opts);

Options

    $("div").unmodal({
        hide: function() {

        }
    });

$.unmodal.clear()

The unmodal will clear by default if the user clicks on it, or presses escape. If you would like to trigger this programmatically, use $.unmodal.clear.

    $("div").unmodal();
    $.unmodal.clear();

$.unmodal.refresh()

If you ever need to trigger a refresh because of an external event, just call refresh - it is essentially a noop if there is not current unmodal.

    $("div").unmodal();
    $("div").html("Changed content");
    $.unmodal.refresh();

Demos