locked
Button onclick brings up pop up RRS feed

  • 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>

    Monday, April 22, 2019 3:32 PM

Answers

  • 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>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 22, 2019 7:41 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 23, 2019 3:34 AM

All replies

  • User-501297529 posted

    Anybody help please.

    Monday, April 22, 2019 4:16 PM
  • User-501297529 posted

    Bumping again for help.

    Monday, April 22, 2019 5:53 PM
  • 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>

    Monday, April 22, 2019 6:19 PM
  • 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?

    Monday, April 22, 2019 6:56 PM
  • 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>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 22, 2019 7:41 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 23, 2019 3:34 AM