Button onclick brings up pop up

Question

User-501297529 posted

I'm trying to fix the code below so when I click on the button 'Click Me' it brings up the popup in the iframe. Currently the iframe shows on the page when it first loads. I want to hide this until I click on the button. Here is my current code:

<div class="description pagecontent simple"></div>

<iframe src="https://shop.com/embed/5cb9eabdf830850f00389a01" style="width: 100%; height: 800px;" allowfullscreen="" frameborder="0"></iframe> <button onclick="HTML5Flipbook_popup_open ()">Click me</button>

<div class="description pagecontent simple"></div>

Answer 1

User-501297529 posted

Anybody help please.

Answer 2

User-501297529 posted

Bumping again for help.

Answer 3

User-943250815 posted

May de this sample can give some direction. Button will Show/Hide IFrame in pure javascript.
Have in mind, that due to Cross-Origin some parts or even all site can not be loaded.
Check on borwser console (F12)

<div class="description pagecontent simple"></div>
  <button onclick="document.getElementById('frame').style.display = document.getElementById('frame').style.display == 'none' ? 'block' : 'none'; return false;">Click me</button>
  <iframe id="frame" src="https://shop.com/embed/5cb9eabdf830850f00389a01" style="width: 100%; height: 800px; display:none;" allowfullscreen="" frameborder="0"></iframe> 
  <div class="description pagecontent simple"></div>

Answer 4

User-501297529 posted

jzero

May de this sample can give some direction. Button will Show/Hide IFrame in pure javascript.
Have in mind, that due to Cross-Origin some parts or even all site can not be loaded.
Check on borwser console (F12)

<div class="description pagecontent simple"></div>
  <button onclick="document.getElementById('frame').style.display = document.getElementById('frame').style.display == 'none' ? 'block' : 'none'; return false;">Click me</button>
  <iframe id="frame" src="https://shop.com/embed/5cb9eabdf830850f00389a01" style="width: 100%; height: 800px; display:none;" allowfullscreen="" frameborder="0"></iframe> 
  <div class="description pagecontent simple"></div>

Hi Jzero,

This works but what I want the frame to do is open so it is full screen. Currently it opens inside of a frame but I want it to open so it is full screen. So that when open it covers the page content. Does that make sense?

Answer 5

User-943250815 posted

This sample cover, and show iframe. There is no close button.
If this is close to what you looking for, I suggest take a look at sweetAlert2 https://sweetalert2.github.io/ and try sample #5 that uses html as parameter, and also you have a better control

function zShowIFrame() {
      var zWindowWidth = document.documentElement.clientWidth;
      var zWindowHeight = document.documentElement.clientHeight;
      var zPopupWidth = (zWindowWidth * 0.75);
      var zPopupHeight = (zWindowHeight * 0.75);
      document.getElementById('content').style.position = 'absolute';
      document.getElementById('content').style.width = zPopupWidth + 'px';
      document.getElementById('content').style.height = zPopupHeight + 'px';
      document.getElementById('content').style.top = (zWindowHeight - zPopupHeight) / 2 + 'px';
      document.getElementById('content').style.left = (zWindowWidth - zPopupWidth) / 2 + 'px';
      document.getElementById('popup').style.display = 'block';
    }

<style type="text/css">
    #popup {display:none; z-index: 100}
    #back {background-color: black; opacity: 0.6; filter: alpha(opacity=6); ; top:0px; left:0px; width: 100%; height: 100%; z-index:110;}
    #content{background-color: #E7E7FF; ; width: 300px; height: 50px; padding:20px; border: solid 3px #F7F7F7;text-align: center;z-index: 120;}
  </style>

<div class="description pagecontent simple"></div>
  <button onclick="zShowIFrame(); return false;">Click me1</button>
  <div id="popup">
    <div id="back">&nbsp;</div>
    <div id="content">
      <iframe id="frame" src="https://shop.com/embed/5cb9eabdf830850f00389a01" style="width: 100%; height: 100%; display:block;" allowfullscreen="" frameborder="0"></iframe> 
    </div>
  </div>

Answer 6

User839733648 posted

Hi bootzilla,

According to your description, I suggest that you should create a class to add the styles and set the full screen class to iframe.

Here is working code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        iframe {
            width: 500px;
            height: 500px;
        }

            iframe.fullScreen {
                width: 100%;
                height: 100%;
                ;
                top: 0;
                left: 0;
            }
    </style>
</head>
<body>
    <iframe src="https://shop.com/embed/5cb9eabdf830850f00389a01" style="display:none;"></iframe><br />
    <button onclick="makeFullScreen()">Make Full Screen</button>
    <script>
        function requestFullScreen(element) {
            // Supports most browsers and their versions.
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function makeFullScreen() {
            document.getElementsByTagName("iframe")[0].className = "fullScreen";
            document.getElementsByTagName("iframe")[0].style.display = "block";
            var elem = document.body;
            requestFullScreen(elem);
        }
    </script>
</body>
</html>

For more, you could refer to: https://stackoverflow.com/a/33768712/10487763 

Best Regards,

Jenifer