laden mehrere modals dynamisch

Question

Ich habe HTML auf meiner Seite index.php, die eine JQuery modale Box ist (standardmäßig ausgeblendet)

ich dann diese Funktion haben, die den modalen zeigt und füllt seinen Titel und Inhalt.

Wenn ich dies anrufe, ersetzt es jeden vorherigen Inhalt im Modal, da es die gleiche ID hat.

Gibt es eine Möglichkeit ich die Modalverben erstellen kann dynamisch mehrere hintereinander

function LoadModalBody(content, title) { 
    title = title || ''; 

    $("#modal_page").fadeIn("slow"); 
    $("#modal_title").html(title); 

    $("#modal_close_button").click(function(){ CloseModal(); }); 

    $("#modal_page_body").html(content); 

    //$("html, body").animate({ scrollTop: 0 }, "slow"); 
} 

die Funktion alle zeigen, die modalen zu schließen dies:

function CloseModal(reloadflag) { 
    reloadflag = reloadflag || ''; 

    $("#modal_page").fadeOut(); 

    if(reloadflag === 'Y') { 
     location.reload(); 
    } 
} 

Ich dachte, eine ID zu schaffen für jedes modale innerhalb der Funktion, so dass sie einzigartig sind und jedes auf diese Weise anzeigen, aber ich bin nicht sicher, dass dies der beste Weg ist

Answer 1

Das Problem ist, dass .html() überschreibt den gesamten modalen Inhalt. Wenn Sie diese Funktion verwenden, löschen Sie den gesamten vorherigen HTML-Inhalt des Modals und ersetzen ihn durch das letzte Feld, das an .html() übergeben wurde.

Sie können .append() anstelle von .html() verwenden.

Es gibt ein einfaches Beispiel für das dynamische Hinzufügen von Feldern im modalen Dialog.

function openDialog(titleDialog,content){ 
 
    $("#dialog").dialog({ 
 
    height: 520, 
 
    width: 400, 
 
    modal: true, 
 
    title: titleDialog, 
 
    
 
    open: function() { 
 
     \t $(this).append(content); 
 
      $("#testDiv").css("display","block"); 
 
     }, 
 
     buttons: { 
 
      Cancel: function() { 
 
       $(this).dialog("close"); 
 
      }, 
 
     \t Save:function(){ 
 
     \t \t 
 
     \t } 
 
     } 
 
    
 
    }); 
 
    } 
 
    
 
    $("#openDialog").on('click',function(){ 
 
    
 
    \t openDialog("some title",$("#testDiv")); 
 
    });

#testDiv{ 
 
    height:100px; 
 
    width:100px; 
 
    border: solid 2px; 
 
    display:none; 
 
} 
 

 
#dialog{ 
 
    border:solid 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 

 
<div id="dialog"> 
 
</div> 
 

 
<button id="openDialog"> 
 
click to open 
 
</button> 
 

 
<div id="testDiv"> 
 

 
</div>

Answer 2

Sie können einen Dialog Container mit einigem Dialog html-Schemata innerhalb erstellen und dann eine Funktion erstellen, die neuen Dialoge auf der Grundlage dieses Schema schaffen und natürlich mit Ihrem Inhalt nach innen:

HTML

<div id="dialogs"> 
<div class="dialog-tmpl"> 
    <div class="dialog-body"></div> 
</div> 
</div> 

CSS

.dialogs { 
    display:none; 
} 

JS

var createNewDialog = (title, body) => { 
    var $newDialog = $('#dialogs .dialog-tmpl').clone(); 
    $('.dialog-body', $newDialog).html(body); 
    $('#dialogs').append($newDialog); 
    $newDialog.dialog({ 
     'title': title 
    }); 
    return $newDialog; 
}; 

Nun, wenn Sie einen neuen Dialog öffnen möchten, rufen Sie einfach diese Funktion mit den Parametern und bekam Sie einen neuen Dialog:

$('#open-dialog').on('click', function(e) { 
    var $dlg = createNewDialog('Dialog title', '<h3>Some HTML content</h3>'); 
}); 

Sie können das neue Dialogfeld erstellen lassen, das von der Funktion zurückgegeben wird, so dass Sie das Dialog-Popup weiter bearbeiten können. Zum Beispiel, wenn Sie einen Dialog schließen wollen, dann müssen Sie jetzt den JavaScript-Variable mit dem von createNewDialog wie folgt zurück Dialog verwenden:

$dlg.dialog('close'); 

Natürlich können Sie verwalten müssen, wie Sie die Dialoge speichern werden so Sie können über den gesamten Code darauf zugreifen. Es gibt viele Möglichkeiten, dynamische Elemente zu steuern. Sie können sogar eindeutige IDs für jeden Dialog zuweisen und diese später verwenden, wenn Sie sie benötigen.

Sie können das Arbeitsbeispiel finden Sie hier: http://zikro.gr/dbg/html/jq-modal.html

Answer 3

Sie Ihren Panel-Code in einem String-Variable in Ihrer LoadModalBody Funktion halten und eine globale modal_id Variable hält eine eindeutige ID zu jedem zuweisen Ihre modals dann das modale an das Mutterelement anhängen:

var _modal_id = 1; 
function LoadModalBody(content, title) { 
    var div = "<div id='modal" + _modal_id + "' class='mymodal'>" + 
    // elements in your modal + 
    + "</div>"; 
    $("#modal_parent_element").append(div); 

    // other parts of the function 
} 

Sie entweder die .mymodal Klasse verwenden, können alle entlassen der modals auf einmal oder verwenden Sie die einzelnen ID, um ein bestimmtes modal zu schließen.