JSFiddle - React, Tailwind, and code Playground

by Kriti

HTML

</head>
  <body ng-app="MyApp" ng-controller="MyCtrl">

 Add Book: <button id="modalOpen">Add Book</button> <br><br>
 Remove Book: <input type="search" id="search"> <button id="remButton">Remove Book</button> <br><br>

<div id="storedBooks"> </div>

    <div id="wrapper">
<div id="window">

<div style="text-align: right;"><a id="modalClose" href="#">close <b>X</b></a></div>

<p>Enter name of the book you wish to add to list: </p>

<form id="modalValidate" method="POST" action="#">
<p><label>Book Name<strong>*</strong><br>
<input type="text" autofocus required size="120" name="name" value=""></label></p>
<p><input type="submit" name="bookForm" value="Send Message"></p>
</form>

</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->

CSS

#modal_wrapper.overlay:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background: #000;
    background: rgba(0,0,0,0.7);
  }

  #modal_window {
    display: none;
    z-index: 200;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 360px;
    padding: 10px 20px;
    background: #fff;
    border: 5px solid #999;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }

  #modal_wrapper.overlay #modal_window {
    display: block;
  }

JavaScript

// Form Validation
  var checkForm = function(e) {
      var form = (e.target) ? e.target : e.srcElement;
      if(form.name.value == "") {
        alert("Please enter the book name. \n");
        form.name.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
      }
   };
 
//Initialisation
if(document.addEventListener) {
    document.getElementById("modalValidate").addEventListener("submit", checkForm, false);
    document.addEventListener("DOMContentLoaded", modalInit, false);
  } else {
    document.getElementById("modal_feedback").attachEvent("onsubmit", checkForm);
    window.attachEvent("onload", modalInit);
  } 

// open and close modal window
  var modalInit = function() {

  var modalWrapper = document.getElementById("wrapper");
  var modalWindow  = document.getElementById("window");
  
  var openModal = function(e)
  {
    modalWrapper.className = "overlay";
    modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
    modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px";
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
  };

  var closeModal = function(e)
  {
    modalWrapper.className = "";
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
  };

  var clickHandler = function(e) {
    if(!e.target) e.target = e.srcElement;
    if(e.target.tagName == "DIV") {
      if(e.target.id != "window") closeModal(e);
    }
  };

  var keyHandler = function(e) {
    if(e.keyCode == 27) closeModal(e);
  };

  if(document.addEventListener) {
    document.getElementById("modalOpen").addEventListener("click", openModal, false);
    document.getElementById("modalClose").addEventListener("click", closeModal, false);
    document.addEventListener("click", clickHandler, false);
    document.addEventListener("keydown", keyHandler, false);
  } else {
    document.getElementById("modalOpen").attachEvent("onclick", openModal);
   ...