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);
});