0

我有一个简单的例子，我使用 FancyBox 作为灯箱。我有一个配置为使用 FancyBox 的表单。一个链接是当我单击它时显示在灯箱中的图片，这对我来说非常适合。我也有一个简单的 .html 表单，但是当我单击它时，它不会显示在灯箱中，也不会重定向到表单。下面是我的代码：

菜单表格.html

<!DOCTYPE html>
<html>
<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.8.2.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

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

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>

    <script type="text/javascript">

    $(document).ready(function() {

            $('#regForm').click(function() {
                $.fancybox({
                        'href' : 'form.html'
                    });

                return false;
            });

            $('#pic').click(function() {
                $.fancybox({
                        'href' : 'http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg'
                    });

                return false;
            });

        });


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

    <a id ="regForm" href="form.html" >form</a>

    <a id ="pic" href="http://4.bp.blogspot.com/-ZdjEZ8qqBq0/UA2dNK8JYDI/AAAAAAAAAJ8/31bh4BzcA6E/s400/Dog-1.jpg" >dog</a>


</body>
</html>

表单.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <label>Name</label><input type="text" />
    <label>Password</label><input type="text" />
    <input type="submit"/>

</body>
</html>
4

1 回答 1

1

你有什么理由必须使用这种click()方法吗？

如果不是，这个简单的脚本适用于image和form：

$(document).ready(function(){
  $(".fancybox").fancybox();
});

现在，在特定情况下form，由于这是一个外部 html 文档，因此您必须告诉 fancyboxtype必须打开的内容，因此，在您的 html 中您可以这样做

 <a class="fancybox fancybox.ajax" href="form.html" >open form</a>
 <a class="fancybox" href="http://4.bp.blogspot.com/-ZdjEZ8qqBq0/UA2dNK8JYDI/AAAAAAAAAJ8/31bh4BzcA6E/s400/Dog-1.jpg" >open dog image</a>

注意fancybox.ajax我们让 fancybox 知道内容的附加类type。另请注意，ajax如果 html 文档在同一个域中或iframe在另一个域中（您也应该有权访问），您可以使用

 <a class="fancybox fancybox.iframe" href="form.html" >open form</a>

最后注意：ajax不会在本地工作，你必须在服务器上测试它。

于 2012-10-22T23:18:38.730 回答