CODEWITHSUNDEEP
htmllightboxmodalpopup
Łukasz Wójcik
Łukasz Wójcik

Reputation: 9

How to put iframe in the modal popup?

I'm trying to write code that will cause the modal popup to turn on when I press a button on my website and display an external website. I know that I will have to place the iframe in the modal popup - but I can't deal with this element. This external website is a survey created in Typeform, I want it to appear on my website, not in a new tab, so as not to make life more difficult for users.

I only tried the solutions that I found after searching for the phrase "how to put an iframe in a lightbox" - for some reason (I'm a beginner) I thought that the pop-up window was called a lightbox - my friend literally corrected me now. I still can't find a solution on the internet. I tried writing the code myself and looking for guides on the web. Merging iframe code with lightbox doesn't work (the posts with these two codes included screenshots that literally showed what I wanted, i.e. a pop-up window with an external website - that's why I was fooled into thinking it was called a lightbox):

<a href="URL LINK" data-lightbox="iframe">BUTTON CODE</a>

I also tried:

<a href="URL LINK iframe=true">BUTTON CODE</a>

Upvotes: 1

Views: 405

Answers (2)

grg
grg

Reputation: 5839

Put the <iframe> in a <dialog> and call showModal on it.

<dialog><iframe src="https://example.com"></iframe></dialog>
<button onclick="document.querySelector('dialog').showModal()">Open</button>

Upvotes: 0

Adam Basha
Adam Basha

Reputation: 562

There is nothing like the code you provided. But you can achieve this effect with js. There are 2 ways to go to write all the code from scratch or use a library. This is how to use a library to do that with js:

function showAlert() {
  Swal.fire({
    title: 'Check this out!',
    html: '<iframe width="100%" height="315" src="https://example.com" frameborder="0"></iframe>',
    showCloseButton: true,
    showCancelButton: true,
    focusConfirm: false,
    confirmButtonText: 'Great!',
    cancelButtonText: 'Close'
  });
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button onclick="showAlert()">Click me!</button>

Don't forget to replace the iframe with a valid link

Upvotes: 0

Related Questions