我已经花了好几个小时徒劳地努力解决这个问题。.SOOO非常感谢您的帮助。

我正在为朋友创建一个网站。我通常不使用Ajax,但他购买了此模板并要求我进行所需的修改。一切进展顺利,直到我达到了这一点。

有一个画廊,我的朋友想要独特的东西。目前我要实现的是,当成员单击图像时,它会在iframe中打开一个页面。

我希望这个iframe可以覆盖网站,就像它是一个独立页面一样(就像一层一样)。

我为此目的使用了Jquery。我有适当的Iframe容器div。当成员单击图像时。Iframe div变为可见,并覆盖了视口。

这是网站页面。

http://weahub.com/HH2/Nature.php

它完全按照我在FireFox中所需的方式工作。但是在Chrome上,其行为有所不同。您可能可以在浏览器中查看页面源代码/ CSS,但是我将分享以下代码。

index.php:

<!DOCTYPE HTML>

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Hamada Hajuj | Photographer Portfolio</title>

    <link rel="shortcut icon" href="img/fi.ico" type="image/x-icon" />
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" type="text/css" href="HoverEffect/css/style.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/device.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

    <script type="text/javascript" src="HoverEffect/js/modernizr.custom.72835.js"></script>

    <!--[if lt IE 9]>
        <div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>
    <![endif]-->
</head>


<body id="mainBody">

<script>
function closeImage() {
    $('#iframeContainer').fadeOut('normal');
    $('#iframeClose').fadeOut('normal');
    $('#mainBody').css("overflow-y", "scroll");
}
</script>

<div id="iframeContainer"></div>
<div id="iframeClose"><a onclick="closeImage();">Back to Gallary</a></div>



<div id="webSiteLoader"></div>
<div id="glob-wrap">
    <!-- end fullscreen gallery -->
    <div id="imgSpinner"></div>
    <a href="#" id="prevButton"></a>
    <a href="#" id="nextButton"></a>
    <div id="galleryHolder">
        <div id="imageHolder">
            <img src="img/bg_pic2.jpg" alt="" data-image-align="top_right">
        </div>
    </div>
    <div id="inner">
        <ul>
            <li><a href="img/bg_pic2.jpg" data-image-align="top_right"></a></li>
            <li><a href="img/bg_pic3.jpg" data-image-align="top_left"></a></li>
            <li><a href="img/bg_pic1.jpg" data-image-align="top_right"></a></li>
            <li><a href="img/bg_pic4.jpg"></a></li>
            <li><a href="img/bg_pic5.jpg"></a></li>
        </ul>
    </div>
    <!-- end fullscreen gallery -->
    <header>
        <div class="container">
            <!--logo and company name-->
            <h1><a href="/" class="navbar-brand"><img src="img/logo.png" class="img-responsive" alt="Hamada Hajuj Photographer Portfolio"></a></h1>
            <!--menu-->
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <nav id="mainNav" data-follow="location" data-type="navigation">
                        <ul>
                            <li><a href="/"></a></li>
                            <li><a href="/gall.php">gallery</a>
                                <div class="sf-mega">
                                    <ul>
                                        <li><a href="#">Urban City</a></li>
                                        <li><a href="#">Studio Modeling</a></li>
                                        <li><a href="#">People</a></li>
                                        <li class="last"><a href="Nature.php">Nature</a></li>

                                    </ul>
                                </div>
                            </li>
                            <li><a href="/about.php">about me</a></li>

                            <li><a href="/blog.php">blog</a></li>

                            <li><a href="/contacts.php">contacts</a></li>
                        </ul>
                    </nav>
                </div>
            </nav>
        </div>
    </header>
    <article id="content" data-follow="location" data-type="switcher">
    </article>




    <div id="other_pages" class="container" data-follow="location" data-type="switcher" data-flags="ajax">
        <?php /*
        <!--<div id="gallery" data-id="gallery"></div>-->
        */?>
    </div>
    <footer>
        <ul class="soc_links follow-links">
            <li><a href="#" class="facebook"><img src="img/soc_icon1.png" alt=""></a></li>
            <li><a href="#" class="googleplus"><img src="img/soc_icon2.png" alt=""></a></li>
            <li><a href="#" class="twitter"><img src="img/soc_icon3.png" alt=""></a></li>
        </ul>
        <div class="copyright">&copy; <span id='year'></span> &bull; <a href="/privacy.php">privacy policy</a><br><!-- {%FOOTER_LINK} --></div>
    </footer>
</div>

</body>


ajax / Nature.php:

<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contacts</title>
</head>
<body>

        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1" style="float:center;">
                <h3 style="margin-top:-20px; margin-bottom:20px;">Gallery --> Nature</h3>


<script>
function loadImage(id) {
    document.getElementById('iframeContainer').innerHTML='<iframe class="imageIframe" src="http://akramabdulfattah.com"></iframe>';
    var width=$( window ).width();
    var height=$( window ).height();
    $("#iframeContainer").css("width", width);
    $("#iframeContainer").css("height", height);
    $("#mainBody").css("overflow-y", "hidden");
    $("#iframeContainer").fadeIn(0500);
    $("#iframeClose").fadeIn(0500);
}

</script>

                        <a onclick="loadImage(123);"><img src="Photos/Nature_Pic1_Thumbnail.jpg" alt="Nature Image 1" class="thumbImage"><div class="hover"><span class="icon"></span></div></a><br>
                        <a onclick="loadImage(123);"><img src="Photos/Nature_Pic1_Thumbnail.jpg" alt="Nature Image 1" class="thumbImage"><div class="hover"><span class="icon"></span></div></a>

                </div>
            </div>

        </div>

</body>
</html>


在我的样式表中,我有这个(关于这个活动):

/*IFrame for images */
#iframeContainer {
   position: fixed !important;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display:none;
  z-index: 8000;
}

.imageIframe {
    z-index:8000;
    height:100%;
    width:100%;
}

#iframeClose {
    z-index:8010;
    position:fixed;
    top:0px;
    left:0px;
    display:none;
    color:white;
}


我已经尝试过的事情:
我了解到,Chrome更改了一些设置,这些设置与使用Z-index渲染固定位置或对转换后的对象使用固定位置有关。我尝试清除Z和3D中的所有变换,但不起作用,并尝试仅在固定位置(没有z-index)上进行变换,也不起作用。我也尝试了一些绝望的解决方案,不值得一提,我得出的结论是,由于某些原因我无法弄清:(

非常感谢您的帮助。

提前非常感谢您!!

最佳答案

我认为这是因为您拥有style.css文件的“透视” css属性(它不在您粘贴的代码中,而是在您链接到的站点的源文件中)。

您可以在style.css文件中删除以下行:

perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;


我不知道它们的用途,但是当我删除它们时,似乎可以解决您的问题,而无需更改其他任何我可以看到的东西。

关于jquery - 固定位置在Chrome中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20708940/

10-09 07:17