Как после перезагрузки страницы отобразить модальное окно в Bootstrap?

Question

[lasermedcentre]

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

Как это сообщение вывести в модальном окне? В какой контейнер его обернуть?

Пример

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Не помогает. Т.к. после нажатия на кнопку происходит перезагрузка страницы...

Answer 1

[Вадим Белкин]

$('.modal').modal('show');
Открытия модального окна. После перезагрузки вызывать, либо по нажатию на кнопку делать e.preventDefault(); и подгружать модалку динамически и открывать.

Comments

[lasermedcentre]

Спасибо за отклик, Вадим! Но не понятно "как это сделать".
После перезагрузки страницы у меня есть блок, который я могу вывести средствами пхп (и проконтролировать чтобы он не выводился при первичном заходе на страницу, пока форма не заполнена).
Но я не понимаю как в этом блоке использовать $('.modal').modal('show'); чтобы открыть модальное окно.

[Вадим Белкин]

Какую версию bootstrap вы используете? В старых версиях показ модалки можно было сделать классами "fade in". В последней версии не прокатит, так как там помимо классов ещё некоторые CSS свойства у элементов добавляются, в том числе и самой странице.

Вы же можете средствами php вывести подключение скрипта при повторной загрузке?

[Вадим Белкин]

<script>
      $(document).ready(function(){
        $('.modal').modal('show');
      })
    </script>

[lasermedcentre]

<script>
$('.modal').modal('show');
</script>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="false">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">&#215;</span></button>
				<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
			</div>
		        <div class="modal-body">
		          ...
        		</div>
		</div>
  </div>
</div>

Ничего не открывает. =(

[lasermedcentre]

Вадим Белкин: 3 бутстрап.

<script>
      $(document).ready(function(){
        $('.modal').modal('show');
      })
    </script>


<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="false">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">&#215;</span></button>
				<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
			</div>
		        <div class="modal-body">
		          ...
        		</div>
		</div>
  </div>
</div>

Тоже не работает.

[Вадим Белкин]

jsfiddle.net/keha1enj/1 Пример посмотрите. Прямо в html после модалки вставлен скрипт (в окне HTML), можно перед модалкой вставить. При загрузке открывается. Посмотрите в консоли, есть ли ошибки.