asked on

Opening an iframe as full screen inside a modal

Hello,
I want to open a modal composed of an iframe full screen.
Any idea on how to achieve that?

do you mean the following and consecutive tasks ?
1 - open a page in fullscreen without user autorisation or interaction
2 - open an external page out of your own control and set witdth and height to fit the fullscreen browser page

BiXma Augmented

ASKER

no :)
1- show a button "Open google"
2- when clicked on it, it open a modal full screen which contains an iframe 100% of google url
3- it have close button to close it

leakim971

Google don't want you open it in an iframe, there's a protection about this

BiXma Augmented

ASKER

i will not open google i will open my website, google was just an example :)

leakim971

the button and some JS to open the page :

<!DOCTYPE html>
<html>
<head>
    <script>
        function o() {
            window.open("modal.html", "mywin", "width="+screen.availWidth+",height="+screen.availHeight);
        }
    </script>
</head>
<body>
<button onclick="o();">open</button>
</body>
</html>

Open in new window

modal.html :

<!DOCTYPE html>
<html>
<body style="margin:0px;padding:0px;overflow:hidden;height:100vh;">
<button>CLOSE</button>
<iframe id="iframe" src="yourpage.html" frameborder="0" height="100%" width="100%" style="overflow:hidden;height:100%;width:100%"></iframe>
</body>
</html>

Open in new window

BiXma Augmented

ASKER

dear, this is not a modal, this a opening a new page.
Modal should appear inside the page without opening extra tab in browser

leakim971

ok, you can found lot of plugins doign that (click on iframe example)
a random one : http://izimodal.marcelodolce.com/
also you will need to set the option "fullscreen" to true, by default it's set to false :
http://izimodal.marcelodolce.com/#Options

BiXma Augmented

ASKER

I saw it but coudnt know how to integrate it, any working example?

leakim971

so you're not a developer?

BiXma Augmented

ASKER

not experienced and new to web

leakim971

do you know you can't open the iframe in fuill screen mode if the browser is not in full screen mode?
so if the user is half of teh computer screen, your iframe will fill the same dimension

BiXma Augmented

ASKER

yes, what i mean in full screen i mean on the browser section not the screen itself

leakim971

here a full working page I build following theid documentation :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
    <script>
        jQuery(function($) {
            $("#modal-iframe").iziModal({
                iframe: true,
                iframeHeight: 800,
                iframeURL: "http://izimodal.dolce.ninja",
                fullscreen: true
            });
        });
    </script>
</head>
<body>
<!-- Modal structure -->
<div id="modal"> <!-- data-iziModal-fullscreen="true"  data-iziModal-title="Welcome"  data-iziModal-subtitle="Subtitle"  data-iziModal-icon="icon-home" -->
    <!-- Modal content -->
</div>
<button data-izimodal-open="#modal-iframe">Modal</button>
</body>
</html>

Open in new window

BiXma Augmented

ASKER

I tried, It open first in model, the it refresh the main page with the link of the iframe:(

leakim971

it look like you did not tried it with your own page... you seems to be very busy (some letters are missing in previous comment)

BiXma Augmented

ASKER

Hello,
I am sorry for typing mistakes in my previous comment.
After changing the url it works, however it have 2 issues:
1- the width is not full width.
2- there is no close button.
Thx for your effort

BiXma Augmented

ASKER

Any help!?

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.