How to use iframe in bootstrap modal popup?
May 09, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To use iframe in bootstrap modal or popup, you put your iframe in the modal body class so when anyone opens the modal he will able to see the iframe in the modal.
See a short example of making iframe with in modal in bootstrap.
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch modal iframe
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe
width="100%"
height="200vh"
src="https://www.youtube.com/embed/rBd0h-g59dg"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</div>
</div>In this article, you will see the installation of bootstrap, create the bootstrap modal, and make an iframe in the modal.
Bootstrap installation
First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">Add below CSS link in your head tag to install the bootstrap 5 library
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">and javascript scripts in your body tag.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>Put the below javascript scripts in your body tag if you planning to use dropdowns, popovers, or tooltips in your project.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>Example of iframe with bootstrap modal
Here, You have to do the following things.
- Create a button with a modal toggle attribute.
Here, I used the
data-bs-toggle="modal"anddata-bs-target="#exampleModal"attribute to trigger the modal when the user clicks on it. - Create a Modal and look as per your need. So, I remove the header and footer from the bootstrap modal skeleton to show like an iframe modal.
- Put your iframe tag with the link in the modal body. In the example, I embed a youtube video to make an iframe popup.
- Customize your iframe. I remove the border for the iframe and provide the appropriate width and height as per my need.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch modal iframe
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe
width="100%"
height="200vh"
src="https://www.youtube.com/embed/rBd0h-g59dg"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</div>
</div>
</body>
</html>The output of the above program of bootstrap modal with iframe example.
Here, we are provided code sandbox links for the above program for the bootstrap modal with an iframe example. Then you can use it whenever you want and do the changes as per your requirements.
All the best 👍