0

colorbox.js を使用して、いくつかのフォームをライトボックスに表示しています。ページには複数のフォームがあり、各フォームにはライトボックスでフォームを開くリンクがあります。現在、ライトボックスは開きますが、フォームは表示されません。これが私のjqueryスクリプトです：

jQuery(document).ready(function() {

    $('.myForm').hide();

        $('.link_to_form').click( function() { $(this).next('.myForm').show() } );

        $(".link_to_form").colorbox({ 
            width: "50%", 
            inline: true,
            opacity: ".5", 
            href: ".myForm", 
            onClosed: function() {
                $(".myForm").hide();
            }

            });
    });

2 つのフォームと 2 つのリンクの HTML は次のとおりです。

<a href="#" class="link_to_form">Form 1</a>
<div class="myForm">
<form></form>
</div>
<a href="#" class="link_to_form">Form 2</a>
<div class="myForm">
<form></form>
</div>
4

2 に答える 2

0

実際のデモ http://jsfiddle.net/2anwK/3/

脚本

  <script type='text/javascript' src="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/jquery.colorbox.js"></script>

  <link rel="stylesheet" type="text/css" href="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/colorbox.css">

コード

$('.myForm').hide();

$('.link_to_form').click(function() {
    $(this).next('.myForm').show()
});

$(".link_to_form").colorbox({
    width: "50%",
    inline: true,
    opacity: ".5",
    href: ".myForm",
    onClosed: function() {
        $(".myForm").hide();
    }

});

作業イメージ

ここに画像の説明を入力

于 2012-06-25T23:28:46.953 に答える
0

これがあなたがしなければならないことです：

リファレンスを見て、実装方法を確認できます。

HTML

<a href="#myForm1" class="link_to_form colorbox">Form 1</a>
<div id="myForm1" class="myForm">
    <form>
        <p>text1</p>
    </form>
</div>
<a href="#myForm2" class="link_to_form colorbox">Form 2</a>
<div id="myForm2" class="myForm">
    <form>
        <p>text2</p>
    </form>
</div>

JS

jQuery(".link_to_form").on('click', function() {
    var $self = $(this),
        $popup = $self.next('.myForm');
    $self.colorbox({
        width: "50%",
        inline: true,
        opacity: "0.5",
        onOpen: function() {
            $popup.show();
        },
        onClosed: function() {
            $popup.hide();
        }

    });
});

CSS

.myForm{
    display: none;
}

デモ

于 2012-06-26T00:05:28.947 に答える