Question

我在我的网站上使用了jquery花式弹出框。我在弹出框中有问题。每当我点击弹出框上的内容时，弹出框都会闪烁。

下面是我在当地试过的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>   

    <script type="text/javascript" src="../source/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />

    <style type="text/css">
        .fancybox-custom .fancybox-skin 
        {
            box-shadow: 0 0 50px #222;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {          
                $(".fancybox").fancybox();
        });
    </script>

</head>
<body>
        <div class="fancybox">Test Content</div>    
</body>
</html>

任何帮助很多的帮助。谢谢大家，

Answer 1

您能提供指向您网页的链接吗？

这可能是你的box-shadow财产。如果某些浏览器没有前缀，则不支持此功能，因此删除它或添加-moz和-webkit标记也应该可以解决问题。

<style type="text/css">
.fancybox-custom .fancybox-skin {
  -webkit-box-shadow: 0 0 50px #222;
  -moz-box-shadow: 0 0 50px #222;            
  box-shadow: 0 0 50px #222;
}
</style>

Answer 2

经过深入分析后，我已经解决了我的问题。实现各种功能

下面的代码解决了我的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
    <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>   

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />

    <script type="text/javascript">
            $(document).ready(function() {          
                $(".fancybox").fancybox().trigger('click');
             });
    </script>

</head>
<body>
        <h1>fancyBox</h1>

    <a class="fancybox" href="#inline1" style="display:none">Inline</a>

    <div id="inline1" style="width:400px;display: none;">
        <h3>Etiam quis mi eu elit</h3>
        <p>test</p>
    </div>
</body>
</html>

Jquery花式弹出框内容中的闪烁问题单击

2 个答案: