0

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

不会$(this).lightbox()工作，如果有人点击一个按钮，我试图让灯箱弹出另一个页面。

对不起，我的意思是打开一个 div 而不是一个新页面。我打算使用 jquery 单击绑定事件，以便解决该部分，只需要弄清楚如何用灯箱打开隐藏的 div ...我正在使用

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

4

2 回答 2

0

如果您有这样的灯箱链接：

<a href="image.jpg" rel="lightbox" id="my-link">My Link</a>

然后您可以使用以下代码在其他地方打开它：

$("#my-link").trigger("click");
于 2013-06-24T16:47:20.970 回答
0

抱歉，我在您指定您使用的灯箱之前写了我的示例。不过，我会留下答案，以防它对您有用。

这是一个使用 jQueryUI 库中包含的灯箱（又名对话框）的示例。<head>首先注意用于加载库的标签。库必须在代码之前加载，jQueryUI 主题应该在 jQueryUI 库之前加载。

请注意，灯箱替换了我调用的 DIV #msgbox。在 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>
于 2013-06-24T16:44:30.913 回答