jQuery asModal Demos

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>