Lightweight Modal Dialog With Plain JavaScript and Animate.css – rmodal.js

Category: Modal & Popup , Recommended | July 5, 2018
Author: zewish
Views Total: 3,270
Official Page: Go to website
Last Update: July 5, 2018
License: MIT


Lightweight Modal Dialog With Plain JavaScript and Animate.css – rmodal.js


A pure JavaScript library to create animated modal dialogs that use Animate.css for amazing CSS3 based open/close animations. Works perfectly with Bootstrap framework.

How to use it:

Load the animate.css for modal animations.

<link rel="stylesheet" href="//">

Load the required rmodal.css for basic modal styles.

<link rel="stylesheet" href="src/rmodal.css">

Include Bootstrap’s CSS to style the modal window (Optional). You can also add your own styles in the CSS.

<link rel="stylesheet" href="//">

Create the content for the modal dialog.

<div id="modal" class="modal">
  <div class="modal-dialog animated">
    <div class="modal-content">
      <form class="form-horizontal" method="get">
        <div class="modal-header"> Modal Headling </div>
        <div class="modal-body">
          Modal Body
        <div class="modal-footer">
          <button class="btn btn-default" type="button" onclick="modal.close();">Close</button>
          <button class="btn btn-primary" type="submit" onclick="modal.close();">Cancel</button>

Include the rmodal.js library in your document

<script src="src/rmodal.js"></script>

Create a link to trigger the modal dialog.

<a href="#" id="showModal">Show modal</a>

Enable the trigger link to toggle a modal dialog.

window.onload = function() {
  var modal = new RModal(document.getElementById('modal'), {
      //content: 'Abracadabra'
      beforeOpen: function(next) {
      , afterOpen: function() {

      , beforeClose: function(next) {
      , afterClose: function() {
      // , bodyClass: 'modal-open'
      // , dialogClass: 'modal-dialog modal-dialog-lg'
      // , dialogOpenClass: 'animated fadeIn'
      // , dialogCloseClass: 'animated fadeOut'
      // , focus: ['input.form-control', 'textarea', 'button.btn-primary']

  window.addEventListener('resize', function() {
  }, false);

  document.addEventListener('keydown', function(ev) {
      if (ev.which == 27) {
  }, false);

  document.getElementById('showModal').addEventListener("click", function(ev) {
  }, false);

  window.modal = modal;


v1.0.31 (07/05/2018)

  • Update

You Might Be Interested In:

One thought on “Lightweight Modal Dialog With Plain JavaScript and Animate.css – rmodal.js

  1. Amy Beeston

    I’m using this modal for a project, but I can’t seem to control how wide it is even when I take out the input field. Where is this styling set up so I can change it?


Leave a Reply