jquery - определение опций динамически

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

Вы определяете модальный 2 раза, глобального и внутренние DoModal()

Внутри функции вы звоните на document.ready() вы назначаете кнопки для модального, определенных в глобальном масштабе. Но внутри doModal() существует также локальная определенная переменная modal, которая вам не назначает кнопки.

Я бы определил модальные внутри готовности() - функции и передать его в качестве аргумента 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'); 
            } 
         } 
      } 
      ); 
}); 

Answer 2

Я не знаю, если это поможет. Я создал библиотеку jQuery 'growl', которая отображает модальный диалог. У нее нет кнопки, но я думаю, вы можете ее расширить. Вот ссылка на библиотеку.

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

Надеемся, что это дает вам некоторые идеи и полезно.

Боб