Pretty Simple Modal Dialog In Pure JavaScript – tiModal

Category: Javascript , Modal & Popup | March 16, 2017
Author: bluzky
Views Total: 1,012
Official Page: Go to website
Last Update: March 16, 2017
License: MIT


Pretty Simple Modal Dialog In Pure JavaScript – tiModal


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!
  This is a default modal
  <b>Click on overlay to hide me.</b>

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');

The default CSS styles for the modal.


.tioverlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: none;
  text-align: center;
  overflow-y: auto;


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

  backgroundColor: "rgba(0,0,0,0.5)",
  events: {}, // custom events
  modal: false // modal mode