overlay

by alexchetv

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <title>Basic modal demo</title>
  </head>
  
  <body>
    <div>
      <p>
        <button id="start">Start</button>
      </p>Французы лидируют среди всех европейцев, получивших российское гражданство,
      пишет бельгийская газета Le Soir со ссылкой на данные «Евростата». 4503
      француза получили гражданство России, среди немцев таковых 4191 человек,
      на третьем месте финны — 1925 гражданина, следом идут итальянцы — 1881
      человек. При этом издание не указывает период, за который «Евростат» проанализировал
      данные. Накануне президент России Владимир Путин подписал указ о предоставлении
      знаменитому французскому актеру Жерару Депардрье гражданства России. В
      пятницу его соотечественница актриса Брижит Бардо также изъявила желание
      получить российское гражданство.</div>
    <div id="overlay"></div>
    <div id="modal">
      <textarea rows="5" cols="25"></textarea>
      <button id="close">Close</button>
    </div>
  </body>

</html>

CSS

body {
  margin: 0;
}
#overlay {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  background: black;
  opacity: 0.8;
  filter: alpha(opacity=50);
}
#modal {
  display: none;
  position: fixed;
  z-index: 101;
  top: 33%;
  left: 25%;
  width: 50%;
  background-color:red
}

JavaScript

var modal = document.getElementById('modal');
 var overlay = document.getElementById('overlay');
 document.getElementById('start').onclick = function () {
   modal.style.display = 'block';
   overlay.style.display = 'block';


 };
 document.getElementById('close').onclick = function () {
   modal.style.display = 'none';
   overlay.style.display = 'none';

 };

 /*var triggers = $("#start").overlay({
 
      // some mask tweaks suitable for modal dialogs
      mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
      },
 
      closeOnClick: false
  });*/