0

I am using this css-only lightbox:

https://www.thecssninja.com/demo/futurebox/#close

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="The CSS Ninja" />
    <meta name="keywords" content="CSS, CSS3, CSS pseudo selectors, Futurebox" />
    <meta name="description" content="Futurebox, lightbox without the javascript" />
    <meta name="robots" content="all" />
    <meta name="copyright" content="The CSS Ninja" />

    <link rel="stylesheet" type="text/css" href="https://www.thecssninja.com/demo/futurebox/_styles.css" media="screen" />

    <title>Futurebox, lightbox without the javascript | The CSS Ninja</title>

</head>
<body>

    <div id="cssninja">
        <p><a href="http://www.thecssninja.com/xhtml/futurebox">Example from the [CSS] Ninja</a></p>
    </div>

    <ul>
        <li><a href="#futurebox_img1"><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></a></li>
        <li><a href="#futurebox_img2"><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></a></li>
        <li><a href="#futurebox_img3"><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></a></li>
        <li><a href="#futurebox_img4"><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></a></li>
        <li><a href="#futurebox_img5"><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></a></li>
    </ul>

    <div class="overlay" id="futurebox_img1">
        <a href="#close" title="Close future box"><img src="gr_cssninja_lrg.png" alt="The Css Ninja" width="469" height="500" /></a>
    </div>

    <div class="overlay" id="futurebox_img2">
        <a href="#close" title="Close future box"><img src="gr_cssninja_lrg2.png" alt="The Css Ninja" width="469" height="500" /></a>
    </div>

    <div class="overlay" id="futurebox_img3">
        <a href="#close" title="Close future box"><img src="gr_cssninja_lrg3.png" alt="The Css Ninja" width="469" height="500" /></a>
    </div>

    <div class="overlay" id="futurebox_img4">
        <a href="#close" title="Close future box"><img src="gr_cssninja_lrg4.png" alt="The Css Ninja" width="469" height="500" /></a>
    </div>

    <div class="overlay" id="futurebox_img5">
        <a href="#close" title="Close future box"><img src="gr_cssninja_lrg5.png" alt="The Css Ninja" width="469" height="500" /></a>
    </div>

    <!-- Google analytics -->
    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-4638292-1");
        pageTracker._initData();
        pageTracker._trackPageview();
    </script>

</body>
</html>

My problem is, when I use this lightbox inside an iframe the lightbox is opening only in the middle of that iframe. You can see what I mean here in jsfiddle:

https://jsfiddle.net/sqvz2ahp/

Is it possible that the lightbox is always in the center of the browser page, no matter if my code was implemented with an iframe?

The important thing is: I can only work with CSS not with javascript.

peace_love
  • 6,229
  • 11
  • 69
  • 157
  • https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe this can help you. – vijayscode May 29 '17 at 17:50
  • From what I know it's not possible. You can not edit elements inside an iframe (without javascript at least) and from inside an iframe you can not edit elements outside of it. – Arthur May 29 '17 at 17:51

0 Answers0