0

現在、Web アプリケーションでブロック 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;
    });

});
4

3 に答える 3

1

各ウィンドウにクラスを追加します-

さて、私はあなたがウィンドウの開放をトリガーするために何を使用しているのかわかりません、すなわちlinks..buttons..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/

于 2012-07-31T20:23:12.133 に答える
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" ) );
});
于 2012-07-31T19:56:07.717 に答える
1

最初に、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");
于 2012-07-31T19:58:25.593 に答える