jQuery Modal

Create a simple jQuery and CSS based modal window.

by flatiron_school

HTML

<div id="cover"></div>
<div id="modal"><span id="close">X</span> blah blah</div>
<button id="edit">Click Me</button>

CSS

#cover {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background: rgba(0,0,0,0.25);
  z-index: 1;
  display: none;
}

#modal {
  position: absolute;
  width: 33%;
  left: 33%;
   top: 20%;
  height: auto;
  background: rgba(255,255,255, 1);
  z-index: 2;
  display: none;
}

JavaScript

//jQuery Simple Modal Example

$('#edit').click(function(){
  $('#cover, #modal').fadeTo(200,1);
});

$('#close, #cover').click(function(){
  $('#cover, #modal').fadeTo(200,0).hide();
});