несколько диалоговых окон на одной странице

Question

Требование состоит в том, чтобы отображать диалоговое окно при нажатии кнопки. Я создал диалоговое окно с использованием пользовательского интерфейса jQuery. Пожалуйста, найдите здесь код http://jsfiddle.net/M4QM6/32/. ISsue у меня есть одна функция для создания диалогового окна, как я могу показать несколько диалоговых окон на одной странице с каждым диалоговым окном, отображающим разные данные, Когда я нажимаю кнопку dialog2, мне нужно показать диалоговое окно с текстом и отправьте кнопку. Пожалуйста, предложите. Ниже приведен пример кода:

$(function() { 
    $("#dialog").dialog({ 
      autoOpen: false, 
      resizable: true, 
      width:"750", 
      height:300, 
      modal: true, 
      buttons: { 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    }); 

Answer 1

Вы могли бы пойти пару маршрутов. Так как потребность в диалоговом контенте довольно специфична (textarea control - первый диалог появляется второй диалог - и т. Д.), Я бы жестко запрограммировал нужные div на странице. Итак, создайте div «#textAreaDialog» и поместите необходимые элементы управления, чтобы объявление отображало его стиль: none.

Далее, измените свою функцию, чтобы принять параметры (имя div, которое должно быть вытолкнуто, funciton для выполнения, если нажата кнопка «ОК» - и функция, выполняемая при нажатии «Отмена») не ограничиваясь использованием #dialog для всех ваших модалов, и вы можете точно контролировать, что происходит, когда нажимается каждая кнопка (не всегда просто закрывая диалог. Затем установите обработчики событий для событий нажатия кнопок, которые вам нужны, и вызовите диалоговые соответственно

HTML:.

<input type="button" id="btnPopFirstModal" Value="Open First Modal"/> 

    <div id="divFirstModal" style="display:none;"> 
     Here is the content for the first modal 
    </div> 

    <div id="divSecondModal" style="display:none;"> 
     Here is the content for the second modal 
    </div> 

Javascript функции:

function PopDialog(divToPop, OkFunction, CancelFunction) 
    { 
     $("#" + divToPop).dialog({ 
       autoOpen: false, 
       resizable: true, 
       width:"750", 
       height:300, 
       modal: true, 
       buttons: { 
        "Ok": function() { 
         OkFunction(); 
         $(this).dialog("close"); 
        }, 
        "Cancel": function(){ 
         CancelFunction(); 
         $(this).dialog("close"); 
        } 
       } 
      }); 

     }); 
    } 

    function PopSecondModal(){ 
     PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here}); 
    } 

Javascript обработчики событий:

$("#btnPopFirstModal").click(function(e){ 
     e.preventDefault(); 
     PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed 
     return false; 
    }); 

Помните, что вы можете расширить это столько, сколько вы хотите, добавляя больше обработчиков событий и пользовательские дивы использовать для более адаптированной модальностей. Кроме того, как вы можете видеть, вы можете написать свои OK и Cancel funcitons inline при вызове функции PopDialog - или вы можете передать ей имя функции (это предпочтительнее, если вы собираетесь повторно использовать эту функцию).

Answer 2

Вот как я сделал:

$(
    //when JQuery is ready 
    funciton() 
    { 
     $('#SomeButton').on 
     (
      'click', 
      function() 
      { 
       //Note that content could be anything (HTML, text...) 
       //This dynamicly create a div to be your dialog 
       $('<div>').append(content).dialog 
       (
        { 
         //autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now 
         resizable: true, 
         //I remove the double quotes here because height didn't have any but maybe it was the other way around 
         width:750, 
         height:300, 
         //I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals. 
         modal: false, 
         buttons: 
         { 
          Close: function() 
          { 
           $(this).dialog("close"); 
          } 
         }, 
         //this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup. 
         close: 
         function() 
         { 
          $(this).dialog('destroy').remove(); 
         } 
        } 
       ); 
      } 
     ); 
    } 
);