Modal

by wildanv10

HTML

<div style="text-align: center">
  <div id="screen"></div>
  <div id="modal">
      <button>x</button>
      <p>Hello I'm a Modal</p>
  </div>
  <h3>Modal</h3>
  <button id="trigger-modal">open modal</button>
</div>

CSS

#screen, #modal {
    display: none;
    position: fixed;
}

#screen {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1;
}

#modal {
    width: 33.333%;
    top: 20%;
    left: 33.3333%;
    background: white;
    z-index: 2;
}

JavaScript

$('#trigger-modal').click(function(){
    $('#screen').fadeIn(200, function() {
    	$('#modal').fadeIn(300);
    });
});

$('#screen, #modal button').click(function(){
    $('#modal').fadeOut(300, function() {
    	$('#screen').fadeOut(200);
    });
});