{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 别忘想泡老子 的问题《LightBox not Calling html form》','https://www.manongdao.com/q-1041334.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
Menu 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>
Is there any reason you have to use the
click()method?If not, this simple script works for both the
imageand theform:Now, in the specific case of the
form, since this is an external html document you have to tell fancybox thetypeof content that has to be open so, in your html you could doNOTICE the additional class
fancybox.ajaxwhere we let fancybox know thetypeof content. Please also notice that you could useajaxif the html document is within the same domain oriframeif it is in another domain (where you should have to have access too) soLast NOTE :
ajaxwon't work locally, you have to test it in a server.