How to create a popup iframe in HTML?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To create a popup iframe in HTML, first, we have to create a popup using the below popup css and then add iframe within the popup to make a popup iframe in HTML.

Today, I am going to show you. how to create a popup iframe in HTML with code example.

Table of contents

  • Includes bootstrap view
  • Define its css class
  • Example of popup iframe in html

This article will guide you to create a popup iframe in html with an example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Define its css class

To create a popup in HTML, we will need the below CCS it creates a normal div to popup div.

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background-color: white;
  z-index: 1;
}

#popup-iframe {
  width: 100%;
  height: 100%;
}

Example of popup iframe in html

In this example, we will do the following things

  1. Create a button with javascript that helps us to open of popup iframe in html
  2. Add a popup CSS effect to make the div behave like a pop-up
  3. Add iframe with your iframe URL in the popup div.

Let’s look at the following example to understand how it works:

<!DOCTYPE html>
<html>
  <style>
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }

    #popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80vw;
      height: 90vh;
      background-color: white;
      z-index: 1;
    }

    #popup-iframe {
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <h1>The iframe element</h1>
    <button id="popup-button">Open Popup</button>
    <div id="overlay"></div>
    <div id="popup">
      <iframe src="https://aguidehub.com" id="popup-iframe"></iframe>
    </div>

    <script>
      const button = document.getElementById("popup-button");
      const overlay = document.getElementById("overlay");
      const popup = document.getElementById("popup");

      button.addEventListener("click", function () {
        overlay.style.display = "block";
        popup.style.display = "block";
      });

      overlay.addEventListener("click", function () {
        overlay.style.display = "none";
        popup.style.display = "none";
      });
    </script>
  </body>
</html>

Check the output of the above code example.

Html, iframe

Try the below codesandbox link to customize the above example as per your requirement.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts