0

我有包含类似于以下内容的代码。我可以一次在屏幕上打开一个或多个模式。这是代码的简短版本。在实际应用程序中还有很多，所以我想将此函数分成两个：

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

我是否可以将其拆分为两个函数，如下所示：

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 是在与使用 modal.closeModal() 的文件相同的文件中定义的？

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"
});

这是一个使用 jQuery UI 的示例，您可以轻松更改为您需要的内容。我只是使用 jQuery UI 来简化构建示例，因为我没有您的 $.modal 方法。

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...) 并在两个函数之前定义它。

var modal = $.modal

function btnsModal()

function openModal()
于 2012-08-19T13:01:25.903 回答