从Form input type =“submit”打开Fancybox（或equiv）
有没有办法让fancybox（ http://fancy.klade.lv/ ）或任何其他灯箱提交FORM（带图像按钮）？
HTML看起来像这样：
这些不会做：
$("form").fancybox(); $("input").fancybox(); $("input[name='weiter']").fancybox();
有人发现我的错误或有变通方法或替代脚本？ 提前致谢
我相信所有其他答案都错过了问题的重点（除非我是一个误解）。 我认为作者想要的是这样，当提交表单时，其结果将显示在fancybox中。 我没有发现任何其他答案提供了该function。
为此，我使用jQuery Form Plugin（ http://malsup.com/jquery/form/ ）轻松将表单转换为ajax调用。 然后我使用成功回调来使用$ .fancybox（）的手动调用将响应加载到fancybox中。
$(document).ready(function() { $("#myForm").ajaxForm({ success: function(responseText){ $.fancybox({ 'content' : responseText }); } }); });
因此，不要将fancybox附加到某个人工标记，而是将ajaxForm附加到表单本身。
更好的想法是使用即时html，即。
$("#buttontoclick").click(function() { $('Friendly description').fancybox({ overlayShow: true }).click(); });
试试这个
$(document).ready(function() { $("#link").fancybox(); $("#btn").click(function(){ $("#link").trigger('click'); }); });
点击按钮，你会触发隐藏的href点击。
希望这可以帮助
Fancybox能够直接处理ajax请求而无需额外的jQuery脚本。
$("#login_form").bind("submit", function() { $.ajax({ type : "POST", cache : false, url : "/login.php", data : $(this).serializeArray(), success: function(data) { $.fancybox(data); } }); return false; });
基于
- 加兰教皇的原始解决方案[少.ajaxForm]
- Paolo Bergantino的AJAX调用解决方案[替代.ajaxForm]
- Fancybox加载动画处理程序由我自己[所以用户知道内容正在加载]
–
$(document).ready(function() { $("#myForm").submit(function() { $.fancybox.showLoading(); // start fancybox loading animation $.ajax({ data: $(this).serialize(), // get the form data type: $(this).attr('method'), // GET or POST url: $(this).attr('action'), // the file to call success: function(response) { // on success.. $.fancybox({ 'content' : response }); // target response to fancybox }, complete: function() { // on complete... $.fancybox.hideLoading(); //stop fancybox loading animation } }); return false; // stop default submit event propagation }); });
您可以对表单数据执行ajax提交，将数据存储在会话中，然后触发链接单击。
此解决方案可能符合您的目的：
- 没有ajax电话
- 使用fancybox的iframe类型选项
- 在fancybox的href选项中传递url [+ data，通过jquery的序列化方法]
- 加载动画是自动的
–
$(document).ready(function(){ $('#yourform').submit(function() { var url = $(this).attr("action") + "?" + $(this).serialize(); $.fancybox({ href: url, 'type': 'iframe' }); return false; }); });
我刚刚一直在努力解决这个问题，并找到了一种方法来显示在iframe的花式框中的结果，我对ajax不是很好，所以需要一个使用jquery的php解决方案，这里有任何方法，我的第一个答案!!：
需要在jquery.fancybox js文件中进行一些调整，我使用的是jquery.fancybox.1.3.4.pack.js 。 用任何编辑器等打开它，并搜索： name="fancybox-frame ：就是这样，应该只有一个这样的实例，看起来像：
name="fancybox-frame'+(new Date).getTime()+'"
现在你要重命名整个：
fancybox-frame'+(new Date).getTime()+'`
对于你想要的任何东西，我只是称之为： "fbframe"并保存文件。 现在添加jquery设置，并按如下forms表示它应该可以正常工作：
//activate jquery on page load and set onComplete the most important part of this working $(document).ready(function(){ $("#a").fancybox({ 'width' : '75%', 'height' : '100%', 'autoScale' : false, 'type' : 'iframe', 'onComplete':function (){$('#formid').submit();}, }); }); //function called onclick of form button. function activatefancybox(Who){ $("#setID").val(Who); // i set the value of a hidden input on the form $("#a").trigger('click');//trigger the hidden fancybox link } // hidden link // form to submit to iframe to display results. // it is important to set the target of the form to the name of // the iframe you renamed in the fancybox js file.
进程是：
单击提交 – >调用函数 – >函数单击FB链接 – > onComplete
onComplete在FB加载后将表单提交给iframe！ 完成。
请注意我已经从我当前的项目中删除了这个并且刚刚编辑了某些必需的部分，我仍然是一个业余编码器并且如果可以的话会推荐ajax。 而且我也只使用FB1！ FB2现已推出。
我只是必须这样做。 这是我如何去做的。
$('#elementid').fancybox({ onStart : function() { $.post($(this).attr('href'), $('#formid').serialize()); } });
这样你就可以提交表格并一次性调用fancybox。 它确实提交了ajax风格的表单。 “提交”按钮需要位于标签中。
希望有所帮助。