0

我有一个表单（它只是电子商务购物车的模拟器 html 中的一个表单，因为我还没有实现购物车。它只是输入 SKU、名称、价格、数量等并发布到结帐屏幕）我想当我点击一个按钮时，页面将它的信息发布到一个fancybox，我可以在其中导航。

到目前为止，我设法使用 Garland 在此问题上的帖子让结帐（登录屏幕）的fancybox 第一页收到帖子，但是每当我继续流程，登录系统时，它就会在主窗口中打开。

我遇到的问题是我似乎无法在 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。任何人都有解决此问题的想法？

不幸的是，我没有向你们展示它的链接，因为我仍处于早期开发阶段，到目前为止，它都是 localhost。

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

请参阅实施的工作演示。提交表单后（也在花式框内），responseText现在在一个内iframe（我在响应中包含了一些链接，以便您可以继续在花式框内导航）

于 2012-10-20T08:06:02.663 回答