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>



      • Sticky Posts

      • Website Accessibility

        I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for

      • Unveiling Zoho Sites 2.0 - A new dimension in website building

        Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.

      • Visual Editor Webinar

        Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements.  Register here: https://www.zoho.com/sites/webinars/

      • SEO for your Zoho Sites Website

        Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/

      • Zoho Sites Webinar | Integrations

        Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/