daily pastebin goal
35%
SHARE
TWEET

JavaScript full screen overlay using a div element

dkalemis Feb 12th, 2018 (edited) 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head>
  4.  
  5.    <script>
  6.       function showDiv(text, image) {
  7.  
  8.          var div = document.createElement('div');
  9.  
  10.          div.addEventListener('click', function(event) {
  11.             div.style.visibility = "hidden";
  12.          }, false);
  13.  
  14.          window.addEventListener('resize', function(event) {
  15.             if (div.style.visibility == "visible") {
  16.                drawDiv(div, text, image);
  17.             }
  18.          }, false);
  19.  
  20.          drawDiv(div, text, image);
  21.  
  22.          document.body.appendChild(div);
  23.  
  24.       }
  25.  
  26.       function drawDiv(div, text, image) {
  27.  
  28.          div.style.left = "0";
  29.          div.style.top = "0";
  30.          div.style.width = "100%";
  31.          div.style.height = "100%";
  32.          div.style.position = "fixed";
  33.          div.style.visibility = "visible";
  34.          div.style.background = "black";
  35.          div.style.opacity = "0.85";
  36.          div.style.color = "white";
  37.          div.innerHTML = "<br><center><img src= 'https://somedomain/somepath/" + image + ".jpg'><br><div style='width:" + (window.innerWidth / 2) + "'>" + text + "</div></center>";
  38.  
  39.       }
  40.    </script>
  41.  
  42. </head>
  43.  
  44. <body>
  45.  
  46.    <a href="" onClick="showDiv('Some text.', 'imagename'); return false;">Click here</a>
  47.  
  48. </body>
  49.  
  50. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top