灯箱打开一个div

时间:2013-06-24 16:23:01

标签: jquery lightbox

我正在使用灯箱库,我想知道是否可以通过onclick而不是rel来调用它?

如果有人点击按钮,我会尝试让灯箱弹出另一个页面。


抱歉我的不好,我的意思是打开div而不是新页面。我打算使用jquery点击绑定事件,以便部分解决,只需要弄清楚如何用灯箱打开隐藏的div ...我正在使用

http://lokeshdhakar.com/projects/lightbox2/

2 个答案:

答案 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");