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

Question

[Mark]

У меня есть на сайте div формы, около 10 штук. У всех div разные заголовки.
Вопрос: как сделать так, чтобы при клике по div всплывала модальная форма с тем заголовком, который указан в нем?

Comments

[Stalker_RED]

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

[Mark]

Stalker_RED: Да тут код не нужен.
Нужно из формы брать заголовок и отображать в всплывающей форме.
Все формы на html.
Динамические заголовки грубо говоря нужны

[Stalker_RED]

Mark: Похоже, придется добавить в теги javascript. А php можно убрать.
И в чем проблема, получить строку и вставить строку?

[Mark]

Stalker_RED: Да, кстати на js же можно) Спасибо за совет)

[Станислав]

Mark: на JS не только можно, но и нужно.

Answer 1

[Pavlo Barmak]

https://jsfiddle.net/dsL8mo9z/

Answer 2

[Станислав]

Для начала, вы зря указали в тегах 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');
  });
});

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

Comments

[Антон]

Не согласен, сейчас с центрированием через flexbox/translate, и css анимациями, сделать модалку самому очень просто.

[Станислав]

Антон: ну в целом-то конечно ничего сложного ни в чем нет, если знать как и что делать, но автору явно нужен не такой вариант ;-) Ну и опять же, модалки - это и блокирование контента за ними, и обработка кнопок, и поддержка разных браузеров, и поддержка разных размеров. Все это можно сделать самому, но смысл?

[Антон]

Станислав: поддержка браузеров и размеров - это все достигается очень легко через autoprefixer и строчкой с medua query.
А вот кнопки и availability согласен, тут сложнее.

[Станислав]

Антон: ну вот :-) В общем-то, я повторюсь - нет ничего сложного во всем этом, нужны просто знания и определенное время. Я именно это имел ввиду, говоря "трудоемкий процесс" в ответе, а не сложность как таковую.

Answer 3

[Владимир]

На 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();