个人中心
gpt4 book ai didi

jquery - 固定位置在 Chrome 中不起作用

转载 作者：行者123 更新时间：2023-11-28 17:59:46 26 4
gpt4 key购买 nike

我已经为这个问题绞尽脑汁好几个小时了。非常感谢您的帮助。

我正在为 friend 创建一个网站。我通常不使用 Ajax，但他购买了这个模板并要求我进行所需的修改。一切都很顺利，直到我走到这一步。

有一个画廊，我的 friend 想要一些独特的东西。我现在想要实现的是，当成员(member)点击图片时，它会在 Iframe 中打开一个页面。

我希望这个 iframe 覆盖网站，就像它是一个独立的页面(像一个层)。

为此我使用了 Jquery。我有 Iframe 容器 div。当成员单击图像时...Iframe div 变得可见，覆盖视口(viewport)。

这是网站页面。

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)来做，也没有用。我也尝试了一些绝望的解决方案，不值一提，我得出的结论是，Chrome 忽略了固定定位，出于某种我无法弄清楚的原因:(

非常感谢您的帮助。

非常感谢您!!

最佳答案

我认为这是因为您拥有 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/

26 4 0
文章推荐： iphone - writeToFile 正在覆盖以前的数据
文章推荐： javascript - GWT HTML-Class 标签样式未混淆
文章推荐： javascript - 在一个 Web 元素中使用两个定制版本的 Zurb 基础框架
文章推荐： javascript - 将悬停图标的文本更改为鼠标移出图标上的文本 - JQuery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com