Mark54
@Mark54
Web-developer

Как реализовать смену заголовков в модальном окне?

У меня есть на сайте div формы, около 10 штук. У всех div разные заголовки.
Вопрос: как сделать так, чтобы при клике по div всплывала модальная форма с тем заголовком, который указан в нем?
  • Вопрос задан
  • 1167 просмотров
Решения вопроса 1
kynisa
@kynisa
I just press buttons.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
stanislav-belichenko
@stanislav-belichenko
Backend PHP Developer
Для начала, вы зря указали в тегах php, все телодвижения с модальными окнами и прочим динамическим контентом на странице делаются при помощи js.

В целом же, сначала вам нужно выбрать, каким путем вы хотите идти:
  1. Писать свой собственный код на чистом js для этой цели. Будет быстрее работать (возможно) как загрузка сайта, так и его отображение, но за совместимость со всеми браузерами, за весь привычный для модалок функционал и все прочее будете отвечать вы сами.
  2. Писать свой собственный код, используя JQuery или любой другой js-фреймворк. Уже попроще, и вам даже дали вариант с таким решением в предыдущем ответе, но все равно остаются вопросы по простоте работы с модальными окнами.
  3. Но так как вы не указали в тегах js, предположу, что вы новичок во всем этом и вам стоит использовать не предыдущие два варианта, а этот - использовать фреймворк Bootstrap (HTML, CSS, and JS framework), в котором есть уже реализованные шаблоны со всеми тремя вещами(html, css, js), нужными для построения страниц. Плюс он уже включает в себя упомянутый выше JQuery. В итоге, на примере этого мета-фрейворка, вы сможете научиться одному из вариантов, как правильно работать с фронтендом сайта.


Как в принципе работать с модальными окнами в третьем варианте, вы можете найти тут, как менять динамически заголовок в модальном окне с помощью того же JQuery, вам опять же ответили в предыдущем ответе, соответственно в случае с Bootstrap+JQuery это будет примерно так:

$(document).ready(function(){
  //при нажатию на любой div, имеющий класс .div-modal
  $("div.div-modal").click(function() {
    //сначала сменим заголовок, взяв его из атрибута title текущего div (клик по которому мы обрабатываем)
    $("#myModal h2").html($(this).attr('title'));
    //открыть модальное окно с id="myModal"
    $("#myModal").modal('show');
  });
});


Этот код - только часть того, что вам нужно будет написать, следуя инструкции выше. Но это будет самый верный вариант, на мой взгляд, так как пробовать реализовывать модальные окна самостоятельно - это достаточно трудоемкий процесс, и в итоге вы рано или поздно захотите уйти от того же предложенного вам выше варианта, так как там нет большинства тех вещей, к которым привыкли и вы, и пользователи обычных сайтов.
Ответ написан
djQuery
@djQuery
"Кодируем помаленьку" ("Сказка о Тройке")))
На bootstrap я делаю это так:

<div id="my-modal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">

			<div class="modal-header">
				<h4 class="modal-title modal-feedback">Feedback Title</h4>
				<h4 class="modal-title modal-voting">Voting Title</h4>
				<h4 class="modal-title modal-thanks">Thanks Title</h4>
			</div>

			<div class="modal-body">
				<p class="modal-text modal-feedback">Feedback Text</p>
				<p class="modal-text modal-voting">Voting Text</p>
				<p class="modal-text modal-thanks">Thanks Text</p>
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $l__close;?></button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


Вызов модального окна для случая Thanks:

$(".modal-title, .modal-text").hide();
$(".modal-thanks").show();
$("#my-modal").modal();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы