我正在使用这个jQuery灯箱,它是轻量级的,不知道如何触发波纹管事件,因为我不好,所以我正在跳过一些帮助:
打开前:
beforeOpen: function(event){
}
打开后:
afterOpen: function(event){
}
我的代码工作:
<button id="openbox" href="#fl1">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
<h2>Delete Item</h2>
<div class="row">
<div class="twelve columns">
<strong>Are you Sure?</strong>
<br>blubblub?
</div>
</div>
<div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
<a href="#" class="btn btn_red text_none">Yes</a>
</div>
</div>
$('#openbox').click(function() {
$.featherlight('#fl1');
});
我的Fiddle:http://jsfiddle.net/g68bZ/29/
谢谢。
我已经下载了源代码并遵循了文档,这两个事件都能正常地使用您的示例。
HTML部分:
<button id="openbox" href="#fl1">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
<h2>Delete Item</h2>
<div class="row">
<div class="twelve columns">
<strong>Are you Sure?</strong>
<br>blubblub?
</div>
</div>
<div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
<a href="#" class="btn btn_red text_none">Yes</a>
</div>
</div>
jQuery部分:
<script type='text/javascript'>
window.onload=function(){
$('button.#openbox').featherlight({
targetAttr: 'href',
beforeOpen: function(event){
alert('beforeOpen');
},
afterOpen: function(event){
alert('afterOpen');
}
});
}
</script>
检查此正在运行的JSFiddle
如果你需要其他帮助,请告诉我。
从文档中,您可以使用以下内容:
$('.myElement').featherlight($content, configuration);
$content是jQuery对象,configuration是对象:
在您的示例中:
var configuration = ({
afterOpen: function(event){
//code here
},
beforeOpen: function(event){
//code here
}
});
$('#openbox').click(function() {
$.featherlight('#fl1', configuration);
});
我还没有测试过,但这应该会帮助你朝着正确的方向前进。