AjaxModal

jQuery.AjaxModal allows you to make a awesome modal with ajax support in just 1 line of code. The plugin can be found as a NuGet package at https://www.nuget.org/packages/jQuery.AjaxModal/ or in the GitHub repository at https://github.com/mattlanser/AjaxModal



Step 1 Include jQuery and AjaxModal localy

<script src="~/Content/jquery/3.1.0/jquery.min.js" ></script>
<script src="~/Content/jquery.ajaxmodal/jquery.ajaxmodal.min.js" ></script>
<link href="~/Content/jquery.ajaxmodal/jquery.ajaxmodal.min.css" rel="stylesheet" >

or using a CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" ></script>
<script src="https://lanware.nl/ajaxmodal/ajaxmodal-1.0.8.min.js" ></script>
<link href="https://lanware.nl/ajaxmodal/ajaxmodal-1.0.8.min.css" rel="stylesheet" >


Step 2 Initialize AjaxModal (which can be done using a single line of code)

$('.modal-trigger'). AjaxModal();

or customize the plugin

$('.modal-trigger').AjaxModal({
    modalWidth: '50%', //Width of the modal
    overlayOpacity: 0.33, //Opacity of the modal background overlay
    fadeInDuration: 300, //Duration of the fade in animation
    fadeOutDuration: 300, //Duration of the fade out animation
    closeButton: '&times;', //Text or html
    dismissable: true, //Does clicking outside the modal close it?
    showTitlebar: 'whenAvailable', //'always', 'whenAvailable' and 'never'
    caching: false //Cache the ajax requests
});


Step 3 Using the plugin (with a link or button)

<a class="modal-trigger" date-title="You can add a title" href="Link to open in modal">With a title</a>
<a class="modal-trigger" href="Link to open in modal">Or without one</a>

or in a form

<form action="post.php" method="POST">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <input class="model-trigger" type="sumbit" name="submit" value="Login">
</form>