0

ライトボックスにFancyBoxを使用している簡単な例があります。FancyBoxを使用するようにフォームを構成しています。1つのリンクは、クリックするとライトボックスに表示される画像で、私には最適です。単純な.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>
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にコンテンツfancybox.ajaxを知らせる追加のクラスに注意してください。また、html ドキュメントが同じドメイン内にある場合、または別のドメイン (アクセスする必要がある場所) にある場合にtypeも使用できることに注意してください。ajaxiframe

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

最後の注 :ajaxローカルでは機能しないため、サーバーでテストする必要があります。

于 2012-10-22T23:18:38.730 に答える