<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>
<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
$(document).ready(function() {
$('.fadeScale').asModal({effect: 'fadeScale'});
});
// 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>
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
};