A Simple Pure Javascript Modal Dialog Plugin | TiModal

tiModal is a simple, flexible, and easy-to-customize JavaScript library for creating modal windows and alert/confirmation/prompt dialogs on a web page.

javascript modal popup, best javascript modal library, modal window plugin, modal popup in html, vanilla js modal

How to make use of it:

1. Download the timodal.js file.

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

2. Create your own modal content as follows:

<div class="popup-wrapper" id="default-modal">
  Hello my friend!
  <br/>
  This is a default modal
  <br/>
  <b>Click on overlay to hide me.</b>
</div>

3. Create a button to run the modal.

<button id="show-default-modal">Default modal</button>

4. Conditionally active.

var button = document.querySelector('#show-default-modal');
button.addEventListener('click', function(){
  var modal = FlexModal.create('#default-modal');
  modal.render();
});

5. CSS default styles for modal.

/* REQUIRED CSS */
.tioverlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: none;
  text-align: center;
  overflow-y: auto;
}
/* CUSTOM CSS*/
.popup-wrapper {
  margin: 20px auto;
  display: inline-block;
  background: #fff;
  border-radius: 3px;
  padding: 30px;
  text-align: left;
}
.popup-content-wrapper .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  z-index: 20;
  padding: 0;
}

6. Default settings.

FlexModal.create('#default-modal',{
  backgroundColor: "rgba(0,0,0,0.5)",
  events: {}, // custom events
  modal: false // modal mode
})

Pretty Simple Modal Dialog, TiModal Plugin/Github

See Demo And Download

Official Website(bluzky): Click Here

This superior jQuery/javascript plugin is developed by bluzky. For extra advanced usage, please go to the official website.

Tags: bluzkymodalmodal dialogmodal pluginmodal popupmodal windowtiModalvanilla js modal