0

所以只是为了描述我正在尝试做的事情：我正在尝试一种简单的方法来创建模态消息。尝试减少代码重复（我不想为所有内容创建对话框）。所以希望我能够为模式定义标题、内容和按钮，然后调用一个函数 (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();
});
4

2 回答 2

0

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

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

希望这能给您一些想法并有所帮助。

鲍勃

于 2010-12-06T00:51:20.003 回答
0

您定义模态 2 次，全局和内部 doModal()

在您调用 document.ready() 的函数内，您将按钮分配给在全局范围内定义的模式。但是在 doModal() 内部还存在局部定义的变量 modal，它不会分配给您的按钮。

我会在 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');
                                   }
                        }
             }
           );
});
于 2010-12-06T01:16:11.907 回答