灯箱未调用HTML表单 [英] LightBox not Calling html form
问题描述
我有一个简单的示例，我在灯箱中使用FancyBox.我有一个配置为使用FancyBox的表单.一个链接是一张图片，当我单击它时它会显示在灯箱中，非常适合我.我也有一个简单的.html表单，但是当我单击它时，它不会显示在灯箱中，也不会重定向到该表单.下面是我的代码:
I have a simple example i am using FancyBox for the light box. I have a form configure to use FancyBox. One link is a picture that shows up in the light box when i click it, that works perfect for me. I also have a simple .html form however when i click on it, it doesn't show in the lightbox nor is it redirected to the form. Under is my code:
菜单Form.html
<!DOCTYPE html>
<html>
<head>
<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#regForm').click(function() {
$.fancybox({
'href' : 'form.html'
});
return false;
});
$('#pic').click(function() {
$.fancybox({
'href' : 'http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg'
});
return false;
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
</head>
<body>
<a id ="regForm" href="form.html" >form</a>
<a id ="pic" href="http://4.bp.blogspot.com/-ZdjEZ8qqBq0/UA2dNK8JYDI/AAAAAAAAAJ8/31bh4BzcA6E/s400/Dog-1.jpg" >dog</a>
</body>
</html>
form.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label>Name</label><input type="text" />
<label>Password</label><input type="text" />
<input type="submit"/>
</body>
</html>
推荐答案
您是否有任何理由必须使用click()方法?
Is there any reason you have to use the click() method?
如果没有，则此简单脚本可同时用于image和form:
If not, this simple script works for both the image and the form :
$(document).ready(function(){
$(".fancybox").fancybox();
});
现在，在form的特定情况下，由于这是一个外部html文档，因此您必须告诉fancybox必须打开的内容type，因此，可以在html中执行
Now, in the specific case of the form, since this is an external html document you have to tell fancybox the type of content that has to be open so, in your html you could do
<a class="fancybox fancybox.ajax" href="form.html" >open form</a>
<a class="fancybox" href="http://4.bp.blogspot.com/-ZdjEZ8qqBq0/UA2dNK8JYDI/AAAAAAAAAJ8/31bh4BzcA6E/s400/Dog-1.jpg" >open dog image</a>
注意的附加类fancybox.ajax，我们让fancybox知道内容的type.另请注意，如果html文档位于同一个域内，则可以使用ajax；如果该HTML文档位于另一个域(您也必须具有访问权限)，则可以使用iframe
NOTICE the additional class fancybox.ajax where we let fancybox know the type of content. Please also notice that you could use ajax if the html document is within the same domain or iframe if it is in another domain (where you should have to have access too) so
<a class="fancybox fancybox.iframe" href="form.html" >open form</a>
最后一个提示:ajax在本地不可用，您必须在服务器中对其进行测试.
Last NOTE : ajax won't work locally, you have to test it in a server.
这篇关于灯箱未调用HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
