Открытие одного мода для многих сообщений

Question

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

Вот мой фактический код: https://jsfiddle.net/wrucjszv/

В будущем я буду получать сообщения с помощью AJAX будет массивом, и я не хочу, чтобы создать модальный для каждой должности. Я хочу использовать один модальный, но для содержимого изнутри динамический. В моем случае у меня есть кнопка с идентификатором

#myBtn 

с контентом «Некоторые тексты в моделях ..». Во втором, может быть, у меня будет «я не так хорош в javascript», и список может продолжаться. Я хочу иметь модальную динамику с содержимым изнутри. Что я могу сделать?

EDIT:

https://jsfiddle.net/wrucjszv/4/

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

Answer 1

Все, что вам действительно нужно сделать, это обновить контент перед показом модальности, все остальное может оставаться неизменным. Посмотрите на развилку jsFiddle здесь - https://jsfiddle.net/hvpvfc67/

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

<!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <div class="modal-text"> 
     <p>Some text in the Modal..</p> 
    </div> 
    </div> 

Тогда я получаю ссылку на новый DIV:

var modalContent = document.querySelector('.modal-text'); 

И, наконец, обновить HTML внутри этого DIV в обработчике щелчка:

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modalContent.innerHTML = "The text has changed!"; 
    modal.style.display = "block"; 
} 

Answer 2

Вы держите один модальный, как рама. Вы открываете его каждый раз и создаете содержимое на лету, используя javascript, путем замены модального содержимого.

Самый важный вопрос: откуда вы получаете данные? Если вы сохранили его на странице, это просто, основываясь на том, что было нажато, вы просто поместили правильные данные в модальный.

Предполагая, что вы разместили ваше модальное содержание html в переменном с именем modalContent для того, чтобы поместить его внутри модальных вам нужно:

$('#myModal .modal-content').html(modalContent); 

Если данные не на странице, и вы получаете его от некоторых сторонних API, процесс немного дольше: вы используете событие click для вызова API, а на success callback вы заполняете свою переменную, размещаете ее внутри .modal-content и запускаете модальный open.С другой стороны, если вы, возможно, захотите, чтобы вызвать модальный открытый до фактического получения ответа, но вы должны принять некоторые меры предосторожности:

• всегда удалять существующие модальные содержимое перед открытием его
• использовать загрузчик анимации, чтобы пользователь знает, что он собирается увидеть что-то в модальном
• , если вызов не удается закрыть модальное и отображать уведомление пользователя о неудаче