lightbox打开html
lightbox打开html
提问于 2012-10-04 17:07:48
我正在尝试使用lightbox打开一个表单，表单本身是另一个页面中使用的html。
问题是，我尝试了ShadowBox，它打开了一个iframe，我的大多数变量都在这个过程中丢失了。我尝试过Lightbox5，但似乎找不到可以传入html的代码。
有什么建议吗？
我用ShadowBox做了类似的事情
<a rel="shadowbox[MyStuff]" href="survey.html">survey</a>它将解析传入的元素是一个html，但它将在iframe中打开，从而丢失我在此页面中拥有的变量。
添加了完整的示例代码
<html>
<head>
<!-- the shadowbox stylesheet and js -->
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css"
media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(document)
.ready(function ()
{
// Use this example, or...
$('a[@rel*=lightbox]')
.lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a')
.lightBox(); // Select all links in object with gallery ID
$('#somehiddendiv div')
.lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox')
.lightBox(); // Select all links with lightbox class
// This, or...
$('a')
.lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
$(function ()
{
$.ajax(
{
url: 'survey.html',
dataType: 'html',
success: function (data)
{
$('#somehiddendiv')
.html(data);
}
});
});
</script>
</head>
<body>
<!-- <a href="egypt.jpg"><img src="download.jpg" width="72" height="72" alt="" /></a>
-->
<div id="somehiddendiv"></div>
</body>
回答 2
Stack Overflow用户
发布于 2012-10-04 17:21:59
$(function(){
$.ajax({
url: 'yourotherhtmlpage.html',
dataType: 'html',
success: function(data){
$('#somehiddendiv').html(data);
}
});
});然后添加一个链接或任何在lightbox窗口中打开div的东西。或者通过代码打开它。
Stack Overflow用户
发布于 2012-10-04 17:20:47
您也可以使用fancybox插件来实现相同的目的
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12723903
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号