Load multiple modals dynamically

Question

I have HTML on my index.php page which is a JQuery modal box (hidden by default)

I then have this function which shows the modal and fills its title and content.

When i call this, it replaces any previous content in the modal as it has the same ID.

Is there a way I can create the modals dynamically to show multiple all behind each other

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");
}

The function to close the modal is this:

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

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

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

I thought of creating an ID for each modal inside the function so they are unique and display each one this way but im not too sure this is the best way

Answer 1

You can create a dialog container with some dialog html schemas inside and then create a function that will create new dialogs based on that schemas and of course having your content inside:

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;
};

Now, when you want to open a new dialog, you just call this function with the parameters and you got a new dialog:

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

You'll have the new dialog created returned by the function, so you can further manipulate the dialog popup. For example if you want to close a dialog, you'll now have to use the javascript variable with the dialog returned by createNewDialog like this:

$dlg.dialog('close');

Of course you have to manage how you'll store the dialogs so you can access them through all of your code. There are many ways to control dynamic elements, you can even assign unique IDs for each dialog and use that later when you need it.

You can find the working example here: https://zikro.gr/dbg/html/jq-modal.html

Answer 2

The problem is that .html() overwrite all modal content, so when using this function it delete all previous html content of the modal and replace it with the most recent field passed on .html().

You can use .append() instead of .html().

There is a simple example to how dynamicaly add fields on modal dialog.

function openDialog(titleDialog,content){
  $("#dialog").dialog({
    height: 520,
    width: 400,
    modal: true,
    title: titleDialog,
    
    open: function () {
        	$(this).append(content);
          $("#testDiv").css("display","block");
        },
        buttons: {
            Cancel: function () {
               $(this).dialog("close");
            },
        	Save:function(){
        		
        	}
        }
    
  });
  }
  
  $("#openDialog").on('click',function(){
  
  	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>