我正试图通过将内容放在div中(而不是将其浮动在屏幕中心)来更改fancybox 2的功能,该div最初将被隐藏,并将扩展以适应其内容。当按下关闭按钮时,div将收缩并再次隐藏。
我使用的是iframe fancybox类型,将加载的内容是html。我尝试使用appendTo,但没有成功,有什么想法可以实现吗?
fancybox js文件:
overlay:f('<div class="fancybox-overlay"></div>').appendTo(b.parent||"body")
如果appendTo myDiv没有任何变化(内容仍然加载,但在正文中间):
overlay:f('<div class="fancybox-overlay"></div>').appendTo("#myDiv")
您可能不需要fancybox,但可以创建自己的自定义脚本。
只是为了好玩,用一个像这样的html
<a class="myfancy" href="http://jsfiddle.net/">show my content in div</a>
<div id="targetContent">
<a id="myClose" href="javascript:;">X</a>
<iframe id="targetIframe"></iframe>
</div>
使用一些CSS来隐藏类似#targetContent
的
#targetContent {
position: relative;
display: none;
width: 500px;
height: 350px;
overflow: visible;
background-color: #fff;
}
并按照您需要的方式设置关闭按钮#myClose
的样式。
还为类似iframe的设置基本CSS
#targetIframe {
width: 100%;
height: 100%;
border: 0 none;
}
然后使用此代码将所有选择器绑定到它们的特定事件和回调,以实现平滑转换
jQuery(function ($) {
// cache elements
var $targetDiv = $("#targetContent"),
$iframe = $targetDiv.find("#targetIframe"),
$close = $targetDiv.find("#myClose");
// bind click events to first link and close button
$(".myfancy").on("click", function (e) {
e.preventDefault();
$iframe.attr({
"src": this.href // add the content to iframe before showing
}).parent($targetDiv).slideDown(500, function () { //show div
$close.fadeIn(200).on("click", function () {
$(this).fadeOut(100, function () { // fade out close button
$targetDiv.slideUp(500, function () { // hid div by sliding it up
$iframe.removeAttr("src"); // remove after closing the box
}); // slideUp
}); // close fadeOut
}); // on click myClose
}); // slideDown
}); // on click link
}); // ready
请参阅JSFIDDLE
注意:.on()
需要jQuery v1.7
您可以将选项parentEl
添加到fancybox选项中,
就像parentEl: '.myDivClass'
一样