是否存在有效的 jQuery Shadowbox 表单示例？答案

【问题标题】：Does a working jQuery Shadowbox form example exist?是否存在有效的 jQuery Shadowbox 表单示例？
【发布时间】：2011-07-11 23:26:47
【问题描述】：

我有

window.onload = function()
{
    $('form').submit(function()
    {
        return false;
    });
};

在 onload 函数内部，我稍后调用 Shadowbox.open()。当然，我正在传递选项。无论如何，我的表单提交了整个页面并且未能返回 false。

我一直在寻找一个实际的工作示例，说明如何处理已提交给 Shadowbox 的表单的表单提交。如果你能指出一个，那就太棒了。

谢谢

【问题讨论】：

标签： jquery forms shadowbox

【解决方案1】：

你要做的是：

使用 iframe-player（下载 shadowbox 时必须勾选“外部站点和页面”-复选框）
为 onFinish 提供回调函数，以确保 iframe 在真正提交表单之前存在
将表单的 target-attribute 更改为 sb-player（即 shadowbox 创建的 iframe 的名称）

示例代码（将在影子框中运行谷歌搜索）

<script type="text/javascript">
Shadowbox.init();

$(function() 
  {
    $('form')
      .submit(function()
              {
                //reference to the form, needed in onFinish
                var me=this;

                Shadowbox.open({
                                  //we dont need to load a page
                                content: 'about:blank',
                                  //use the iframe-player
                                player:  'iframe',
                                height:  350,
                                width:   850,
                                options: {
                                          //send the form without 
                                          //triggering the submit-event
                                          //when the iframe is available
                                          onFinish:function()
                                                   {me.submit();}
                                         }
        });
        //set the iframe(the name is sb-player) as target of the form
          $(this).attr('target','sb-player');

        return false;
    });
});

</script>
<form action="http://google.de/search">
<input name="q" value="shadowbox">
<input type="submit">
</form>

【讨论】：