0

次のようなコードを含むコードがあります。画面上で一度に 1 つ以上のモーダルを開くことができます。コードの短いバージョンを次に示します。実際のアプリケーションではさらに多くの機能があるため、この機能を 2 つに分割したいと思います。

function openModal(oLink, content) {
    var btns = {
        'Close': function (win) {
            modal.closeModal()
        }
    }
    var modal = $.modal({
        buttons: btns
    });
}

これを次のように 2 つの関数に分割することは可能ですか。

function btnsModal() {
    var btns = {
        'Close': function (win) {
            modal.closeModal()
        }
    }
    return btns;
}

function openModal(oLink, content) {
    var btn = btnsModal();
    var modal = $.modal({
        buttons: btn
    });
}

これを試すと、次のエラーが表示されます。

Object doesn't support property or method 'closeModal'

modal.closeModal() が使用されているのと同じファイルで modal が定義されているため、最初のスクリプトのみが機能しますか?

4

3 に答える 3

0

必要なものを取得する方法の例を次に示します。

function createModal(options) {

    // create your modal and use the options passed
    // like options.message, and options.title for example
    // here you will set its default behavior

}

// calling it
createModal({
    message: "This is the message".
    title: "A modal"
});

これは、必要なものに簡単に変更できるjQueryUIの例です。$ .modalメソッドがないため、jQueryUIを使用して例を簡単に作成しました。

HTML：

<button id="btn1" type="button">Open Modal 1</button>
<button id="btn2" type="button">Open Modal 2</button>

JavaScript：

    $(function() {

    $( "#btn1" ).click(function(){
        createModal({
            title: "Title!",
            message: "This is a Dialog!"
        });
    });

    $( "#btn2" ).click(function(){
        createModal({
            title: "Another Title!",
            message: "This is another Dialog!"
        });
    });

    function createModal( options ) {

        var $div = $( "<div></div>" );
        $div.append( $( "<p></p>" ).html( options.message ) );

        $div.dialog({
            modal: true,
            title: options.title,
            buttons: {
                "Foo": function() {
                    $(this).dialog( "close" );
                },
                "Bar": function() {
                    $(this).dialog( "close" );
                }
            },
            close: function( event, ui ) {
                // as the container was created on-the-fly
                // we need to do this to destroy the container
                $(this).dialog( "destroy" );
            }
        });

    }

});

実例： http： //jsfiddle.net/davidbuzatto/ZJzky/

于 2012-08-19T13:09:56.407 に答える
0

両方の関数でアクセスできるようにするには、関数スコープ外の変数「モーダル」をデクレアする必要があります。

var modal;
function btnsModal() {
    var btns = {
        'Close': function (win) {
            modal.closeModal()
        }
    }
    return btns;
}

function openModal(oLink, content) {
    var btn = btnsModal();
    modal = $.modal({
        buttons: btn
    });
}
于 2012-08-19T13:10:11.807 に答える
0

モーダル (var modal = $.modal...) をキャッシュし、これを 2 つの関数の前に定義することができます。

var modal = $.modal

function btnsModal()

function openModal()
于 2012-08-19T13:01:25.903 に答える