0

我在我的网站中使用了 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>

任何帮助都非常感谢。谢谢大家，

4

2 回答 2

1

你能提供一个链接到你的页面吗？

这可能是你的box-shadow财产。在某些浏览器中不支持没有前缀，因此删除它或添加-mozand-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>
于 2013-05-08T12:23:00.183 回答
-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>
于 2013-05-08T12:29:15.597 回答