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

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.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts