Pretty Simple Modal Dialog In Pure JavaScript – tiModal

Preview:

Description:

tiModal is a really simple JavaScript library for creating modal windows and alert/confirm/prompt dialog boxes on the webpage.

How to use it:

Load the timodal.js file right before the closing body tag.

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

Create your own modal content as this:

<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>

Create a button to trigger the modal.

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

Active the modal.

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

The default CSS styles for the 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;
}

Default settings.

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