Question

我目前正在使用我的网络应用程序中的Block UI模式插件（http://www.malsup.com/jquery/block/）。

生成模态需要输入一些jQuery。我只是想知道我是不是以最快的方式做到这一点。任何人都可以建议更快的方法来输入下面的代码，因为我觉得我有点重复吗？

 $(document).ready(function () {

/*=======================================
MODAL WINDOW
=======================================*/

    // register window

    $('#register').click(function () {
        $.blockUI({
            message: $('#register_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#register_close').click(function () {
        $.unblockUI();
        return false;
    });

    // about window

    $('#about').click(function () {
        $.blockUI({
            message: $('#about_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#about_close').click(function () {
        $.unblockUI();
        return false;
    });

    // privacy window

    $('#privacy').click(function () {
        $.blockUI({
            message: $('#privacy_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#privacy_close').click(function () {
        $.unblockUI();
        return false;
    });

    // terms window

    $('#terms').click(function () {
        $.blockUI({
            message: $('#terms_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#terms_close').click(function () {
        $.unblockUI();
        return false;
    });

    // language window

    $('#language').click(function () {
        $.blockUI({
            message: $('#language_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#language_close').click(function () {
        $.unblockUI();
        return false;
    });

    // forgot password window

    $('#forgotpwd').click(function () {
        $.blockUI({
            message: $('#forgotpwd_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#forgotpwd_close').click(function () {
        $.unblockUI();
        return false;
    });

});

Answer 1

如果您只使用消息和CSS，那么您可以创建一个返回对象的函数。类似的东西：

function blockUIConfig( elementID, width ) {
    return {
        message: $("#" + elementID),
        width: width != null ? width : "500px"
    }
}

然后您可以将其称为：

$('#register').click(function () {
    $.blockUI( blockUIConfig( "register_win" ) );
});

或者如果宽度不同：

$('#register').click(function () {
    $.blockUI( blockUIConfig( "register_win", "250px" ) );
});

Answer 2

首先在dom-ready处理程序之外添加一个函数：

function addBlockUI(element) {
   $(element).click(function () {
       $.blockUI({
           message: $(element+'_win'),
           css: {
               width: '500px'
           }
       });
   });

   $(element+'_close').click(function () {
       $.unblockUI();
       return false;
   });
}

然后为dom-ready处理程序中的每个元素添加一个调用：

addBlockUI("#register");
addBlockUI("#terms");
addBlockUI("#privacy");
addBlockUI("#about");
addBlockUI("#language");
addBlockUI("#forgotpwd");

Answer 3

为每个窗口添加一个类 -

嗯，我不知道你用什么来触发窗户的开启，即链接......按钮...... .divs。所以在我的小提琴中我只使用了按钮。

$('.windowClass').click(function(){  // <-- bind to all window elements with that class
    $.blockUI({
        message: $('#' + this.id + '_win'),
        css: {
            width: '500px'
        }
    });
});

$('[id$=_close]').click(function () { //<-- gets all elements with id's that end with close
    $.unblockUI();
    return false;
});

锚标签

<a id="register" class='openMod' href='#'>Register</a>
<a id="about" class='openMod' href='#'>about</a>
<a id="language" class='openMod' href='#'>language</a>
<a id="terms" class='openMod' href='#'>terms</a>
<a id="privacy" class='openMod' href='#'>privacy</a>

然后

$('a.openMod').click(function(e){
    e.preventDefault(); // <-- don't forget this
    $.blockUI({
        message: $('#' + this.id + '_win'),
        css: {
            width: '500px'
        }
    });
});

使用相同类

更新链接

http://jsfiddle.net/qt9EZ/2/

输入jQuery Block UI语句的更快捷方式

3 个答案: