jQuery 从 Form input type="submit" 打开 Fancybox（或等效）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/969522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Fancybox (or equiv) from Form input type="submit"
提问by nickmorss
is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)?
有没有办法通过提交表单（带有图像按钮）来获得花式框（http://fancy.klade.lv/）或任何其他灯箱？
HTML looks like this:
HTML 看起来像这样：
<form action="/ACTION/FastFindObj" method="post">
<input name="fastfind" class="fastfind" value="3463" type="text">
<input name="weiter" type="submit">
</form>
These won't do:
这些不会做：
$("form").fancybox();
$("input").fancybox();
$("input[name='weiter']").fancybox();
Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance
有人发现我的错误或有解决方法或替代脚本吗？提前致谢
回答by Garland Pope
I believe all the other answers miss the point of the question (unless I am the one misunderstanding). What I think the author wanted was to have it such that when a form is submitted, its results are displayed in a fancybox. I didn't find that any of the other answers provided that functionality.
我相信所有其他答案都没有解决问题的重点（除非我是一个误解）。我认为作者想要的是当表单提交时，它的结果显示在一个fancybox 中。我没有发现任何其他答案都提供了该功能。
To achieve this, I used the jQuery Form Plugin (http://malsup.com/jquery/form/) to easily convert the form to an ajax call. Then I used the success callback to load the response into a fancybox using a manual call to $.fancybox().
为了实现这一点，我使用了 jQuery 表单插件 ( http://malsup.com/jquery/form/) 来轻松地将表单转换为 ajax 调用。然后我使用成功回调通过手动调用 $.fancybox() 将响应加载到fancybox。
$(document).ready(function() {
$("#myForm").ajaxForm({
success: function(responseText){
$.fancybox({
'content' : responseText
});
}
});
});
So instead of attaching fancybox to some artificial <a> tag, you attach ajaxForm to the form itself.
因此，不是将fancybox 附加到一些人工<a> 标签，而是将ajaxForm 附加到表单本身。
回答by nickmorss
A better idea is to use on-the-fly html, ie.
一个更好的主意是使用即时 html，即。
$("#buttontoclick").click(function() {
$('<a href="path/to/whatever">Friendly description</a>').fancybox({
overlayShow: true
}).click();
});
回答by Yashvit
TRY THIS
尝试这个
$(document).ready(function() {
$("#link").fancybox();
$("#btn").click(function(){
$("#link").trigger('click');
});
});
<input type="button" id="btn" value="Button" />
<div style="display:none;">
<a href="#test" id="link">Click</a>
</div>
<div id="test" style="display:none;">fancy box content</div>
on click of the button you trigger a click on the href which is hidden.
单击按钮时，您会触发对隐藏的 href 的单击。
hope this helps
希望这可以帮助
回答by Ian Bryce
Fancybox is able deal with ajax requests directly without the need of extra jQuery scripts.
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;
});
<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>
回答by Dexter Huinda
Based from
基于从
- Garland Pope's original solution [less .ajaxForm]
- AJAX call solution by Paolo Bergantino [as replacement to .ajaxForm]
- Fancybox loading animation handler by Myself [so the user knows the content is loading]
- Garland Pope 的原创解决方案【less .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
});
});
回答by Dexter Huinda
This solution may serve your purpose:
此解决方案可以满足您的目的：
- no ajax calls
- use fancybox's iframe typeoption
- pass url [+ data, via jquery's serializemethod] in fancybox's hrefoption
- loading animation is automatic
- 没有ajax调用
- 使用fancybox 的iframe 类型选项
- 在fancybox 的href选项中传递url [+ 数据，通过jquery 的序列化方法]
- 加载动画是自动的
--
——
$(document).ready(function(){
$('#yourform').submit(function() {
var url = $(this).attr("action") + "?" + $(this).serialize();
$.fancybox({
href: url,
'type': 'iframe'
});
return false;
});
});
回答by slappy-x
i have just been struggling with this and have found a way to display the results in the iframe of fancy box, i am not good with ajax yet so needed a php solution using jquery any ways here goes, my first answer!!:
我一直在努力解决这个问题，并找到了一种在花式框的 iframe 中显示结果的方法，我不擅长使用 ajax，因此需要一个使用 jquery 的 php 解决方案，这里有任何方法，我的第一个答案！！：
a little tweaking will need to be done in your jquery.fancybox js file, i was using jquery.fancybox.1.3.4.pack.js. open this up with any editor etc., and search for: name="fancybox-frame: thats it, there should only be one instance of this found and will look like:
需要在您的 jquery.fancybox js 文件中进行一些调整，我使用的是jquery.fancybox.1.3.4.pack.js. 用任何编辑器等打开它，然后搜索name="fancybox-frame：：就是这样，应该只找到一个这样的实例，看起来像：
name="fancybox-frame'+(new Date).getTime()+'"
Now you want to rename the whole:
现在你想重命名整个：
fancybox-frame'+(new Date).getTime()+'`
to anything your want, i just called it: "fbframe"and save the file. Now add the jquery settings, and form as follows and it should work fine:
对于您想要的任何东西，我只是调用它："fbframe"并保存文件。现在添加 jquery 设置，格式如下，它应该可以正常工作：
//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
<a id="a" href='#'></a>
// 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.
<form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
<input />
<input />
<input id='setID' type='hidden' name='userid' value='' />
<input type="button" onClick='testfb(123)' />
</form>
The proccess is:
过程是：
click submit -> call function -> function click FB link -> onComplete
点击提交 -> 调用函数 -> 函数点击 FB 链接 -> onComplete
onComplete Submits form to the iframe after FB has loaded it! done.
onComplete 在 FB 加载后将表单提交到 iframe！完毕。
Please note I have ripped this out of my current project and have just edited certain required parts, I am still an amateur coder and would reccomend the ajax if you can. and also am only using FB1! FB2 is now available.
请注意，我已经从我当前的项目中删除了这个，并且刚刚编辑了某些必需的部分，我仍然是一个业余编码员，如果可以的话，我会推荐 ajax。而且我也只使用FB1！FB2 现在可用。
回答by Eric Koh
You can do a ajax submit of the form data, store the data in the session and then trigger the link click.
您可以对表单数据进行ajax提交，将数据存储在会话中，然后触发链接点击。
回答by Joe Mills
I just had to do this. Here's how I went about it.
我只是不得不这样做。这就是我如何去做的。
$('#elementid').fancybox({
onStart : function() {
$.post($(this).attr('href'), $('#formid').serialize());
}
});
That way you can submit the form and call the fancybox all in one shot. It does submit the form ajax style. The "submit" button needs to be in an <a> tag.
这样您就可以一次性提交表单并调用fancybox。它确实提交表单ajax样式。“提交”按钮需要在 <a> 标签中。
Hope that helps.
希望有帮助。
