Question

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

菜单Form.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>

form.html

<!DOCTYPE html>
<html>
<head>

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

</body>
</html>

Answer 1

您是否有必要使用click()方法？

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

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

现在，在form的特定情况下，由于这是一个外部html文档，你必须告诉fancybox必须打开的type内容，在你的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知道fancybox.ajax内容的附加课程type。另请注意，如果html文档位于同一个域中，您可以使用ajax;如果它位于另一个域（您也必须具有访问权限），则iframe可以使用<a class="fancybox fancybox.iframe" href="form.html" >open form</a>

ajax

最后注意：{{1}}无法在本地运行，您必须在服务器中进行测试。

LightBox没有调用html表单

1 个答案: