我正在使用灯箱库,我想知道是否可以通过onclick
而不是rel来调用它?
抱歉我的不好,我的意思是打开div而不是新页面。我打算使用jquery点击绑定事件,以便部分解决,只需要弄清楚如何用灯箱打开隐藏的div ...我正在使用
答案 0 :(得分:0)
抱歉,我在你指定使用哪个灯箱之前写了我的例子。不过,我会留下答案,以防它对你有用。
以下是使用jQueryUI库附带的lightbox(aka对话框)的示例。首先请注意<head>
中用于加载库的标记。库必须在代码之前加载,jQueryUI主题应该在jQueryUI库之前加载。
请注意,灯箱会替换我称之为#msgbox
的DIV。在DOM加载时,该DIV变得不可见,允许我注入HTML并将其显示在灯箱内。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#mybutt').click(function() {
$('#msgbox').html('<iframe src="http://www.stackexchange.com" width="550" height="700"></iframe>');
$('#msgbox').dialog('open');
});
$( "#msgbox" ).dialog({
autoOpen: false,
height: 855,
width: 605,
modal: true,
title: 'Here is a demo:',
buttons: {
"Close page and lightbox": function() {
//do some stuff here
$(this).dialog('close');
}
},
close: function() {
alert('Can do other things as lightbox is closing');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<input type="button" id="mybutt" value="Click the button" />
<div id="msgbox"></div>
</body>
</html>
答案 1 :(得分:0)
如果你有这样的灯箱链接:
<a href="image.jpg" rel="lightbox" id="my-link">My Link</a>
然后您可以使用以下代码在其他地方打开它:
$("#my-link").trigger("click");