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
3 Answers
Answers 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: http://zikro.gr/dbg/html/jq-modal.html
Answers 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>Answers 3
You can keep your panel code in a string variable inside your LoadModalBody function and keep a global modal_id variable to assign a unique id to each of your modals then append the modal to the parent element:
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 } you can either use the .mymodal class to dismiss all of the modals at once or use the each id to close a specific modal.
0 comments:
Post a Comment