Question

所以只是为了描述我正在尝试做的事情：我正在努力创建一种简单的方法来创建模态消息。试图减少代码重复（我不想为所有内容创建对话框）。所以希望我能够只为模态定义标题和内容以及按钮，然后调用一个函数（doModal（））。

由于某种原因，下面的代码没有正确传递按钮（没有显示按钮）。如果我只是将modal.buttons替换为：

{
                thisone: function(){
                    alert('you clicked this one');
                }
            }

那么它会起作用。但后来我无法轻松定义按钮，这与我正在尝试做的事情相悖。

这是当前的代码：

var modal = $('<div id="modal"><p></p></div>');
function doModal()
{
    var modal = $('<div id="modal"><p></p></div>');
    modal.text(modal.content);
    modal.attr('title', modal.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: modal.buttons
    });
}

$(document).ready(function(){
    modal.title = 'Are you sure?';
    modal.content = 'Are you sure? Deleting a product cannot be undone.';
    modal.buttons = {
            thisone: function(){
                alert('you clicked this one');
            }
        };
    doModal();
});

Answer 1

我不知道这是否会有所帮助。我创建了一个'growl'jQuery库，它显示了一个模态对话框。它没有按钮，但我认为你可以扩展它。这是图书馆的链接。

http://blog.bobcravens.com/2010/08/making-the-web-growl-using-jquery/

希望这能为您提供一些想法并提供帮助。

鲍勃

Answer 2

您定义模态2次，全局和内部doModal（）

在您调用document.ready（）的函数内部，您可以将按钮分配给全局范围中定义的模态。但是在doModal（）里面也存在本地定义的变量模态，你不会分配按钮。

我会在ready（） - 函数中定义模态并将其作为参数传递给doModal（）：

function doModal(modal)
{ 
    modal.text(modal.content);
    modal.attr('title', modal.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: modal.buttons
    });
}

$(document).ready(function(){
    var modal = $('<div id="modal"><p></p></div>');
    modal.title = 'Are you sure?';
    modal.content = 'Are you sure? Deleting a product cannot be undone.';
    modal.buttons = {
            thisone: function(){
                alert('you clicked this one');
            }
        };
    doModal(modal);
});

或仅将动态选项传递给doModal（）：

function doModal(options)
{ 
    var modal = $('<div id="modal"><p></p></div>');
    modal.text(options.content);
    modal.attr('title', options.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: options.buttons
    });
}

$(document).ready(function(){
    doModal(
            {
              title   :'Are you sure?',
              content :'Are you sure? Deleting a product cannot be undone.',
              buttons : {
                          thisone: function()
                                   {
                                      alert('you clicked this one');
                                   }
                        }
             }
           );
});

jquery - 动态定义选项

2 个答案: