Full width modal with iframe

Full width modal with iframe


I want to add the following to a code snippet but it is not working

you can see what it is suppose to do here

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2

Your code snippet functionality does not work like most other similar products
(as an example the visual editor in wordpress)

If you past the code into a code snippet you will see what I mean

Thanks for any help with this
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <style>
  7. body {
  8.   font-family: 'Lato', sans-serif;
  9. }

  11. .overlay {
  12.   height: 0%;
  13.   width: 100%;
  14.   position: fixed;
  15.   z-index: 1;
  16.   top: 0;
  17.   left: 0;
  18.   background-color: rgb(0,0,0);
  19.   background-color: rgba(0,0,0, 0.9);
  20.   overflow-y: hidden;
  21.   transition: 0.5s;
  22. }

  24. .overlay-content {
  25.   position: relative;
  26.   top: 8%;
  27.   overflow: hidden;
  28.   padding-top: 100%
  29. }

  31. .overlay-content iframe {
  32.   position: absolute;
  33.     top: 0;
  34.     left: 0;
  35.     width: 100%;
  36.     height: 78%;
  37.     border: 0;
  38. }

  40. .overlay a {
  41.   padding: 8px;
  42.   text-decoration: none;
  43.   font-size: 36px;
  44.   color: #818181;
  45.   display: block;
  46.   transition: 0.3s;
  47. }

  49. .overlay a:hover, .overlay a:focus {
  50.   color: #f1f1f1;
  51. }

  53. .overlay .closebtn {
  54.   position: absolute;
  55.   top: 0;
  56.   right: 45px;
  57.   font-size: 60px;
  58.   margin-top: -5px;
  59. }

  61. @media screen and (max-height: 450px) {
  62.   .overlay {overflow-y: auto;}
  63.   .overlay a {font-size: 20px}
  64.   .overlay .closebtn {
  65.   font-size: 40px;
  66.   top: 15px;
  67.   right: 35px;
  68.   }
  69. }
  70. </style>
  71. </head>
  72. <body>

  74. <div id="myNav" class="overlay">
  75.   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  76.   <div class="overlay-content">
  77.    <iframe frameborder="0"  src='https://forms.zohopublic.com/greaterthanthesum/form/ContactForm/formperma/N2N8CmJYyQUPVOgfRQRi1R0iplUGVyEng16Cm1JGpz0'></iframe>
  78.   </div>
  79. </div>

  81. <h2>Fullscreen Overlay Nav Example</h2>
  82. <p>Click on the element below to open the fullscreen overlay navigation menu.</p>
  83. <p>In this example, the navigation menu will slide downwards from the top:</p>
  84. <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

  86. <script>
  87. function openNav() {
  88.   document.getElementById("myNav").style.height = "100%";
  89. }

  91. function closeNav() {
  92.   document.getElementById("myNav").style.height = "0%";
  93. }
  94. </script>
  95.      
  96. </body>
  97. </html>