jQueryUI启用关闭对话框窗口的链接

时间:2015-06-11 18:55:51

标签: javascript jquery jquery-ui

我正在研究jQuery UI对话框JS Fiddle以供参考。如果您在单击关闭窗口(对话框)时观察到链接未启用,但应根据相对窗口关闭启用链接。如何将关闭对话框窗口与相应的链接相关联并再次启用它?

$(function() {

    function opener(params){
        var _params = params;
            for (var obj in _params){
                dialogOpener(_params[obj]);
            }
        function dialogOpener(selector){
            $('#'+selector.linkSelector).on('click', function(ev){
                ev.preventDefault();
                ev.stopPropagation();
                var url = $(this).attr('href');
                if ($(ev.target).hasClass('disabled')) {
                        return false;
                } else{
                    $('#'+selector.moduleSelector).dialog({width: 800, position: 'top'}).load( url);
                    $(this).addClass('disabled');
                }
            });
        }
    }
    opener([
      { linkSelector: 'google', moduleSelector: 'googleModule'},
      { linkSelector: 'facebook', moduleSelector: 'facebookModule'},
      { linkSelector: 'yahoo', moduleSelector: 'yahooModule'},
      { linkSelector: 'gmail', moduleSelector: 'gmailModule'}
    ]);
});

1 个答案:

答案 0 :(得分:0)

尝试添加在初始化重新启用链接的对话框时在对话框结束时触发的事件。例如,您的dialogOpener函数可能如下所示:

function dialogOpener(selector){
    $('#'+selector.linkSelector).on('click', function(ev){
        ev.preventDefault();
        ev.stopPropagation();
        var url = $(this).attr('href');
        var selected = $(this);
        if ($(ev.target).hasClass('disabled')) {
                return false;
        } else{
            $('#'+selector.moduleSelector).dialog({
                width: 800, 
                position: 'top', 
                close: function(event,ui) { 
                    selected.removeClass('disabled'); 
                }
            }).load( url);
            selected.addClass('disabled');
        }
    });
}

JSFiddle:http://jsfiddle.net/mobj45kt/2/

关闭事件的jQuery Dialog API:http://api.jqueryui.com/dialog/#event-close