javascript - 没有链接的灯箱库

Question

是否有任何灯箱库允许我插入任何内容（例如 div）而无需单击链接？

我看到很多这样的图书馆。用户需要单击图像才能看到灯箱。我想要的是一个计时器，几秒钟后，它会调用灯箱来显示。然后，用户可以根据需要关闭它。

Answer 1

您可以使用 jqueryui 对话框，然后从您想要的代码中调用它：

function openLightBox(title,content){
    //append a div automatic
    if ('#divx').length <= 0) {
            $("body").append('<div id="divx" style="display:none; overflow-x:hidden; overflow-y:auto;" title="'+title+'"></div>');
        }
    //setup dialog
    $('#divx').dialog({
            zIndex: 300,
            width: 500,
            height: 400,
            resizable: false,       
            modal: true,       
            draggable: true,    
            buttons:{
                "close":function(){
                   $(this).dialog('close');
            }
           } ,
            close: function () {
                $(this).empty();
                $(this).dialog("destroy");
            }
        });
    //call it 
        $('#divx').dialog('open');
        $('#divx').html(content);
}

// you want to call it after page load 5 seconds?

$(function(){
setTimeout(function(){
     openLightBox('hello','<h1>my name is fox!</h1>');
     },5000);
});