lean modal

by Berat Emre Nebioğlu

HTML

<script src="https://rawgit.com/mitzip/leanModal.js/master/jquery.leanModal.js"></script>
<a class="btn btn-info" id="registerusertrigger" href="#registerusermodal">register</a>

<form id='registeruserform' action='dataman' method='post' accept-charset='UTF-8'>
  <div id="registerusermodal" style="display:none;">
    <fieldset>
      <legend>Register</legend>

      <label for='email' >Email Address:</label>
      <input type='text' name='email' id='email' maxlength="50" />
      <label for='username' >UserName:</label>
      <input type='text' name='username' id='username' maxlength="50" />
    </fieldset>
  </div>
</form>

CSS

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

JavaScript

$(function () {
  $('#registerusertrigger').leanModal({
    top: 110,
    backdrop: 'static',
    keyboard: true,
    closeButton: ".modal_close"
  });

  $('body').on('close.leanModal', function (e) {
    console.log("Closing modal...");
  });
});