Wednesday, August 02, 2017

CSS Popup Sample

Here's some code I wrote for something I'm doing for work.
This code will show and hide a popup
<html>
  <head>
    <style>
      #pop {
          height: 200px;
          width: 200px;
          position: fixed;
          bottom: 50%;
          right: 50%;
          border: 2px solid;
          padding: 10px;
          background: white;
          display: none;
        }
        #buttonsOnPop {
          position: absolute; 
          right: 0; 
          bottom: 0;
          margin: 5px;
        }
        #popTitle {
          vertical-align: top;
          text-align: center;
          width: 100%;
          background-color: limegreen;
        }
      </style>
      <script>
        function closePopYes() {
          alert("yes");
        }
        function closePopNo() {
            document.getElementById("pop").style.display='none';
        }
        function showPop() {
          var text = "<p>To be or not to be</p><p>Revente</p>";
          var popContent = document.getElementById("popContent");
          popContent.innerHTML = text;
            document.getElementById("pop").style.display='block';
        }
     </script>
  </head>
  <body>
    <div id="pop">
      <div id="popTitle">Pop Window</div>
        <div id="popContent">
      </div>
      <div id="buttonsOnPop">
        <button id="yes" onclick="closePopYes();">Yes</button>
        <button id="no" onclick="closePopNo();">No</button>
      </div>
    </div>
    <button id="showPop" onclick="showPop()">Show Pop</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae iaculis enim. 
Vivamus a tellus sit amet tortor mattis auctor at eget purus. Fusce condimentum semper 
varius. Integer ultricies enim et ipsum scelerisque, dignissim ultricies metus molestie. 
Quisque rutrum, sem id vehicula malesuada, orci purus malesuada dolor, id vehicula nulla 
nisi sed dui. Donec at eros vestibulum, euismod mi quis, rhoncus justo. Curabitur quis 
metus sit amet erat efficitur pellentesque. Nunc dui massa, efficitur ac dapibus ut, 
interdum vel metus. Nunc mattis eleifend nisl, id rhoncus erat cursus et. Nullam semper, 
risus sed feugiat elementum, turpis lacus egestas nisi, quis bibendum lorem turpis eu 
purus. Etiam nec lorem tristique, condimentum ligula ac, mattis erat. Proin aliquet 
quis lectus eu hendrerit. Curabitur vitae laoreet nulla. Pellentesque imperdiet odio id 
urna imperdiet bibendum eget non erat.
</p>

  </body>
</html>