Загружать несколько модалов динамически

У меня есть HTML на моей странице index.php, которая является модульным полем JQuery (скрытым по умолчанию)

Затем я получаю эту функцию, которая показывает модальность и заполняет ее заголовок и содержимое.

Когда я вызываю это, он заменяет любой предыдущий контент в модальном формате, поскольку он имеет тот же ID.

Есть ли способ, которым я могу динамически создавать модалы, чтобы показать несколько всех друг за другом

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

Функция закрытия модальности такова:

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

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

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

Я думал о создании идентификатора для каждого модала внутри функции, чтобы они были уникальными и отображали каждый из них таким образом, но я не слишком уверен, что это лучший способ

Ответ 1

Вы можете создать диалоговый контейнер с некоторыми диалоговыми html-схемами внутри, а затем создать функцию, которая будет создавать новые диалоги на основе этих схем и, конечно, иметь ваш контент внутри:

HTML

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

CSS

.dialogs {
    display:none;
}

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

Теперь, когда вы хотите открыть новое диалоговое окно, вы просто вызываете эту функцию с параметрами, и вы получаете новое диалоговое окно:

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

Появится новое диалоговое окно, созданное функцией, поэтому вы можете продолжить манипулирование всплывающим окном диалога. Например, если вы хотите закрыть диалоговое окно, вам теперь придется использовать переменную javascript с диалогом, возвращаемым createNewDialog следующим образом:

$dlg.dialog('close');

Конечно, вам нужно управлять тем, как вы будете хранить диалоги, чтобы вы могли получить к ним доступ через весь ваш код. Существует множество способов управления динамическими элементами, вы даже можете назначать уникальные идентификаторы для каждого диалога и использовать их позже, когда вам это нужно.

Здесь вы можете найти рабочий пример: http://zikro.gr/dbg/html/jq-modal.html

Ответ 2

Проблема заключается в том, что .html() перезаписывает весь модальный контент, поэтому при использовании этой функции он удаляет все предыдущие html-содержимое модального файла и заменяет его последним полем, переданным в .html().

Вместо .html() вы можете использовать .append().

Существует простой пример того, как динамически добавлять поля в модальный диалог.

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>

Ответ 3

Вы можете сохранить код панели в строковой переменной внутри вашей функции LoadModalBody и сохранить глобальную переменную modal_id для присвоения уникального идентификатора каждому из ваших модалов, а затем добавить модальный элемент к родительскому элементу:

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
}

вы можете использовать класс .mymodal для немедленного отклонения всех модалов или использования каждого идентификатора для закрытия определенного модального файла.