HTML Modal Windows

In this example below you will see how to do a HTML Modal Windows with some HTML / CSS and Javascript

Using CSS driven overlays and modal windows and passing data from one part of the HTML to an HTML form.

Thumbnail
This awesome code was written by mad-d, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mad-d ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML Modal Windows</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <section data-role="page">
    <h2>This is the title</h2>
    <p>This is some content</p>
    <ul data-role="listview">
      <li data-ref="1">List Item 1</li>
      <li data-ref="2">List Item 2</li>
      <li data-ref="3">List Item 3</li>
      <li data-ref="4">List Item 4</li>
      <li data-ref="5">List Item 5</li>
      <li data-ref="6">List Item 6</li>
    </ul>
  </section>
  
  <div data-role="overlay">&nbsp;</div>
  
  <div data-role="modal">
    <h3>Modal Window Title</h3>
    <form>
      <div class="formBox">
        <select name="list" id="list" class="lg">
          <option value="1">First Value</option>
          <option value="2">Second Value</option>
          <option value="3" >Third Value</option>
          <option value="4" >Fourth Value</option>
          <option value="5">Fifth Value</option>
          <option value="6">Sixth Value</option>
        </select>
      </div>
      <div class="formBox">
        <input type="text" id="txt" name="txt" class="lg" placeholder="Enter a value here please"/>
      </div>
      <div class="formBox">
        <input type="button" id="btnCancel" value="Cancel" class="btn"/>
        <input type="button" id="btnSave" value="Save" class="btn"/>
      </div>
    </form>
  </div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mad-d/html-modal-windows-Pwdbgq */
/*************************************
        Defaults
*************************************/

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family:'Open Sans', sans-serif;
}
h2{
  font-size:1.6rem;
  padding:1rem 0;
}
p{
  font-size:1.0rem;
  padding:1rem 0;
}
.wrapper{
  width:100%;
  height:100%;
}
/*************************************
        Layout
*************************************/
[data-role=page]{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  width:100%;
  min-height:100%;
  color:#eee;
  background-color:#333;
  padding:1rem;
}
[data-role=overlay]{
  position:fixed;
  top:0;
  left:0;
  z-index:10;
  height:100%;
  width:100%;
  background-color: rgba(0,0,0,0.82);
}
[data-role=modal]{
  position:fixed;
  top:20%;
  left:10%;
  width: 80%;
  z-index:15;
  max-height:80%;
  padding:5vh;
  border:1px solid #333;
  min-height:10%;
  color:#fff;
  background-color:#666;
  box-shadow:1px 1px 2px rgb(0,0,0);
}
/*************************************
        Forms
*************************************/
.formBox{
  padding: 0.6rem 0;
}
input, select{
  line-height: 1.6rem;
  font-size: 1.2rem;
  padding:0 1rem;
  max-width:90%;
}
.narrow{
  width:2rem;
}
.btn{
  width:auto;
}
.med{
  width:10rem;
}
.lg{
  width:25rem;
}
.xlg{
  width:40rem;
}
/*************************************
        Pages
*************************************/
[data-role=listview]{
  list-style:none;
}
[data-role=listview] li{
  font-size:1.2rem;
  line-height:3rem;
  height:3rem;
  border:1px solid #000;
  background-color:#ccc;
  color:#333;
  font-weight:300;
  padding:0 1rem;
  cursor:pointer;
}
/*************************************
        Modals
*************************************/


/*Downloaded from https://www.codeseek.co/mad-d/html-modal-windows-Pwdbgq */

var app = {
  init: function(){
    document.querySelector("[data-role=listview]").addEventListener("click", app.edit);
    document.getElementById("btnCancel").addEventListener("click", app.cancel);
    document.getElementById("btnSave").addEventListener("click", app.save);
  },
  cancel: function(ev){
    document.querySelector("[data-role=modal]").style.display="none";
    document.querySelector("[data-role=overlay]").style.display="none";
  },
  save: function(ev){
    document.querySelector("[data-role=modal]").style.display="none";
    document.querySelector("[data-role=overlay]").style.display="none";
  },
  edit: function(ev){
    ev.stopPropagation();
    
    document.querySelector("[data-role=modal]").style.display="block";
    document.querySelector("[data-role=overlay]").style.display="block";
    
    var item = ev.target.getAttribute("data-ref");
    var itemVal = ev.target.innerHTML;
    document.getElementById("list").value = item;
    /**************
    Or the really long labourious difficult confusing annoying wasting time way....
    for(var i=0; i< document.querySelectorAll("#list option").length; i++){
      if(document.querySelectorAll("#list option")[i].value == item){
        document.querySelectorAll("#list option")[i].setAttribute("selected", "selected");
      }else{
        document.querySelectorAll("#list option")[i].removeAttribute("selected");
      }
    }
    ****************/
    
    document.querySelector("[data-role=modal] h3").innerHTML = "Editing " + itemVal;
  }
}

document.addEventListener("DOMContentLoaded", app.init);

Comments