dkalemis

JavaScript full screen overlay using a div element

Feb 12th, 2018
338
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