demo

Default


<button href=".register_form" class="form">Login</button>
<div class="register_form">
    <form action="#" method="post">
        <header><h4>Login</h4></header>
        <ul>
            <li>
                <label for="username">Username:</label>
                <input id="username" type="text" name="username" />
            </li>
            <li>
                <label for="password">Password:</label>
                <input id="password" type="text" name="password" />
            </li>
        </ul>
        <footer>
            <button>Submit</button>
        </footer>
    </form>
</div>
<script>
    $(document).ready(function() {
        $('.form').asModal();
    });
</script>

Login

Ajax


<button href="login.html" class="ajaxLoaded">Ajax load sucess !</button>
<button href="fail.html" class="ajaxError">Ajax load failed !</button>
<script>
    $(document).ready(function() {
        $('.ajaxLoaded').asModal();
        $('.ajaxError').asModal();
    });
</script>

so you can see the output in the console

effects


$(document).ready(function() {
    $('.fadeScale').asModal({effect: 'fadeScale'});
});

keyboard


// default:
// closeByEscape: true;
// closeByOverlayClick: true;
<button href="login.html" class="closeByEscape">press ESC to close</button>
<button href="login.html" class="closeByOverlayClick">click overlay to close</button>
<script>
    $(document).ready(function() {
        $('.closeByEscape').asModal({closeByEscape: true});
        $('.closeByOverlayClick').asModal({closeByOverlayClick: true});
    });
</script>

options


Modal.defaults = {
    namespace: 'modal', // String: Prefix string attached to the class of every element generated by the plugin
    skin: null, // set plugin skin
    content: null, // Set the URL, ID or Class.
    overlay: true, // Show the overlay.
    closeElement: null, // Element ID or Class to close the modal
    effect: 'fadeScale', // fadein | slide | newspaper | fall
    overlaySpeed: 200, // Sets the speed of the overlay, in milliseconds
    jqAnimate: 'fade', // set default jquery animate when css3 animation doesn't support
    focus: true, // set focus to form element in content
    errorText: 'sorry, cant find the file !', // set ajax error text
    closeByEscape: true, // Allow the user to close the modal by pressing 'ESC'.
    closeByOverlayClick: true, // Allow the user to close the modal by clicking the overlay.
    width: null, // Set a fixed total width.
    hieght: null, // Set a fixed total height.
    // Callback API
    onOpen: null, // Callback: function() - Fires when the modal open
    onClose: null, // Callback: function() - Fires when the modal close
    onComplete: null // Callback: function() - Fires when the effect end
};