在页面加载时运行jquery-ui小部件

Question

我有一个基本的jquery-ui对话框窗口小部件，该窗口小部件设置为在点击处理程序上执行：

jQuery(document).ready(function() {
    $('.menu_link').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var horizontalPadding = 0;
        var verticalPadding = 15;
        $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
            autoOpen: true,
            width: 600,
            height: 550,
            modal: true,
            resizable: true,
            autoResize: true,
            scrolling: false,
            close: function(ev, ui) { $(this).remove(); },
            overlay: {
                opacity: 0.9,
                background: "white"
            }


        }).width(580 - horizontalPadding).height(550 - verticalPadding);            
    });
});

我想做的是设置它，使其在页面加载时执行。 另外（较低的优先级）是否有一种简单的方法可以将其设置为计时器...例如，在页面加载5秒钟后启动对话框？

Answer 1

删除单击处理程序，并将代码包装到一个函数中（此处称为showIFrame）。
要在5秒后启动它，请使用setTimeout 。
在第2行中输入iframe的网址。

function showIFrame() {
    var url = '>enter url here<';
    var horizontalPadding = 0;
    var verticalPadding = 15;
    $('<iframe id="externalSite" class="externalSite" src="' + url + '" />').dialog({
        autoOpen: true,
        width: 600,
        height: 550,
        modal: true,
        resizable: true,
        autoResize: true,
        scrolling: false,
        close: function(ev, ui) { $(this).remove(); },
        overlay: {
            opacity: 0.9,
            background: "white"
        }
    }).width(580 - horizontalPadding).height(550 - verticalPadding);
}
setTimeout(showIFrame, 5000);

另请参见带有或不带代码的此示例。