0

私はフォームを持っています (カートをまだ実装していないため、e コマース カート用のシミュレーター html の単なるフォームです。SKU、名前、価格、数量などを入力し、チェックアウト画面に投稿するだけです)ボタンをクリックすると、ページの情報がファンシーボックスに投稿され、その中をナビゲートできるようになります。

これまでのところ、この質問に関するガーランドの投稿を使用して、チェックアウト（ログイン画面）のファンシーボックスの最初のページで投稿を受け取ることができましたが、フローを続行してシステムにログインすると、メインウィンドウで開きます。

私が抱えている問題は、iframeでfancyboxを開くことができないように見えるため、ログイン後にコントロールを失い、fancyboxを閉じることです。

私の部分的なhtml:

<form target="Popup" action="../Account/LogOn" method="post" name="form1" id="form1"> 
    <div style="float: left; width: 500px; left: 50%; top: 20px; margin-left: -250px; position: absolute;">
        <div style="float: left; width: 100%; height: auto; margin-top:20px; text-align:center">
            .
            .
            .
            <input type="button" value="regular purchase" onclick="javascript: SendForm();" style="width:150px; height:30px; font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif; font-size: 10pt; vertical-align: middle" /> 
            <input type="submit" value="lightbox purchase" style="width:180px; height:30px; font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif; font-size: 10pt; vertical-align: middle" />
        </div>
    </div>
</form>

私のコード:

$("#form1").ajaxForm({
        success: function (responseText) {
            $.fancybox({
                type: 'iframe',
                content: responseText,
                fitToView: false,
                width: '70%',
                height: '70%',
                autoSize: true,
                closeClick: false,
                openEffect: 'elastic',
                closeEffect: 'fade',
                helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.65)' } } },
                afterClose: function () {
                    location.reload();
                    return;
                }
            });
        }
    });

このコードは、ログインページとすべてを含むファンシーボックスを開きますが、iframe 内ではなく、プレーンな div のみを開きます。誰でもこの問題を回避する考えがありますか?

残念ながら、私はまだ開発の初期段階にあり、これまでのところすべてローカルホストであるため、皆さんに表示するためのリンクがありません。

4

1 に答える 1

2

以前のコメントで推奨したように、この例に基づいて、次のようなfancybox のコールバックを使用しiframeて引数の内部を作成します。successafterShow

success: function(responseText) {
  $.fancybox.open({
    content   : '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
    width     : '70%',
    height    : '70%',
 // fitToView: false, 
    autoSize: false,
    closeClick: false,
    openEffect: 'elastic',
    closeEffect: 'fade',
    helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.65)' } } },
    afterShow : function() {
      var oIframe = document.getElementById('myFrame');
      var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument );
      iframeDoc.open(); 
      iframeDoc.write(responseText);
      iframeDoc.close();
    },
    afterClose: function () {
      location.reload();
      return;
    }
  }); // fancybox
} // success

実装のWORKING DEMOを参照してください。フォームを送信した後 (これもファンシーボックス内)、フォームresponseTextは現在内部にありiframeます (ファンシーボックス内をナビゲートし続けることができるように、応答にいくつかのリンクを含めました)

于 2012-10-20T08:06:02.663 に答える