2

私は持っています：

  • ファンシーボックスを表示する<a href>リンクと
  • 、<form>送信ボタンがajaxの成功をクリックしたときにページにメッセージを表示します。どちらも正常に動作します。

コードは以下のとおりです。

<script>
    $(document).ready(function ()
    { //this fancybox appears when <a href="..." ...>...</a> clicked
        $(".fancybox-effects-d").fancybox({
            padding:15,
            closeBtn:true,
        });

        $("form#submit").submit(function ()
        {
            var name = $('#name').attr('value');
            var password = $('#password').attr('value');
            $.ajax({
                type:"POST",
                url:"index/success",
                data:{ name:name, password:password},
                success:function ()
                {
                    //this form disappears and div appears when submit button of the <form id="submit" ...>...</form> clicked
                    $('form#submit').hide(function ()
                    {
                        $('div#errors').fadeIn(3000);

                    });
                }
            });
            return false;
        });
    });
</script>

そのファンシーボックスを移動して、ajaxの成功に表示したいと思います。どうすればいいですか？

4

2 に答える 2

4

エンドユーザーには見えないリンクを使用して、ajax成功コールバックでjQueryを使用してトリガーすることができます。このようなもの：

<a id="hiddenlink" href="#fancy" style="display: none;"></a>

<script>

    $(document).ready(function ()
    { //this fancybox appears when <a href="..." ...>...</a> clicked
        $(".fancybox-effects-d").fancybox({
            padding:15,
            closeBtn:true,
            }
        });

        $("form#submit").submit(function ()
        {
            var name = $('#name').attr('value');
            var password = $('#password').attr('value');
            $.ajax({
                type:"POST",
                url:"index/success",
                data:{ name:name, password:password},
                success:function ()
                {
                    $("a#hiddenlink").trigger("click");
                    //this form disappears and div appears when submit button of the <form id="submit" ...>...</form> clicked
                    $('form#submit').hide(function ()
                    {
                        $('div#errors').fadeIn(3000);

                    });
                }
            });
            return false;
        });
    });
</script>
于 2012-07-19T13:58:18.120 に答える
3

この単純な関数を使用して、ファンシーボックスを手動で呼び出すことができます

$.fancybox(
        '<p>Content of the box in HTML</p>',
        {
                padding:15,
                closeBtn:true
        }
    );

成功関数に追加するだけです。

于 2012-07-19T14:03:38.777 に答える