Bootstrap - Модальное окно (modal)

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

Bootstrap 3 Bootstrap 4

Назначение и применение компонента Modal

Компонент Modal предназначен для отображения на веб-странице некоторого контента посредством модального окна. В Bootstrap 3 и 4 модальное окно (modal) представляет собой контейнер, который визуально отображается над остальным содержимым страницы.

Bootstrap - Компонент Modal (Модальное окно)
Bootstrap - Компонент Modal

Компонент Modal на веб-странице применяется для решения большого круга задач. Например, может использоваться для отображения регистрационной формы пользователю, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте и чего-то другого.

Демо работы компонента Modal

Особенности компонента Modal

При использование компонента Modal необходимо учитывать следующие его особенности:

  • Открытие нескольких модальных окон не поддерживается. Это означает что авторам, которым требуется данная возможность, необходимо будет её осуществлять самостоятельно посредством написания дополнительного кода.
  • Требование к размещению разметки (HTML-кода) модального окна. HTML-код модального окна желательно располагать в самом верху документа, т.е. после открывающего тега body. Это необходимо выполнить для того чтобы избежать влияния других компонентов на внешний вид и функциональность модального окна.
  • Предостережения, связанные с использованием компонента Modal на мобильных устройствах. Есть некоторые предостережения, касающиеся использования компонента modal на мобильных устройствах. Первое ограничение связано с тем, что когда Вы прокручиваете вверх или вниз модальное окно в некоторых браузерах на iOS или Android вместе с ним прокручивается и остальное содержимое страницы (содержимое элемента body). Второе ограничение касается ошибки, возникающей при рендеринге положения элементов input в модальном окне в момент вызова виртуальной клавиатуры на устройствах iOS. Для решения этой проблемы обычно используют переключение элементов в position:absolute или вызывают таймер для того чтобы скорректировать позиционирование этих элементов вручную. Более подробно с ограничениями, связанными с применением компонента Modal на мобильных устройствах, можно познакомиться в документации.
Модальному окну Bootstrap Вы не можете установить фокус элементу посредством добавления к нему HTML-атрибута autofocus, это добавит к нему только семантическую ценность.

Если Вы хотите при открытии модального окна установить некоторому элементу фокус, то используйте следующий код JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  //#myInput - id элемента, которому необходимо установить фокус
  $('#myInput').focus();
})

Создание модального окна

Создание и управление модальным окном в Twitter Bootstrap 3 и 4 осуществляется с помощью классов CSS, атрибутов data- и методов JavaScript.

Начинается создание модального окна с его разметки.

Процесс проектирования структуры модального окна выполняется с помощью следующих строительных кирпичиков:

  • каркас - 3 блока div, имеющие классы .modal, .modal-dialog и .modal-content.
  • header (заголовок) - блок div, имеющий класс .modal-header.
  • body (основное содержимое) - блок div с классом .modal-body.
  • footer (футер) - блок div с классом .modal-footer.
Bootstrap - Структура модального окна
Bootstrap - Структура модального окна

Из всех кирпичиков модального окна обязательными являются только каркас и блок div с классом .modal-body.

После этого переходят к реализации того как модальное окно должно вызываться. В большинстве случаев вызов модального окна обычно осуществляется при наступлении какого-то события, например, при нажатии кнопки на странице или через некоторое время после загрузки страницы. Осуществить вызов модального окна в Bootstrap можно либо с помощью атрибутов data-, либо с помощью JavaScript.

В качестве примера рассмотрим создание модального окна, имеющего заголовок (header), основное содержимое (body) и футер (footer). Открываться данное модальное окно будет после завершения загрузки страницы.

<!-- HTML-код модального окна -->
<div id="myModalBox" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
        Содержимое модального окна...
      </div>
      <!-- Футер модального окна -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

<!-- Скрипт, вызывающий модальное окно после загрузки страницы -->
<script>
  $(document).ready(function() {
    $("#myModalBox").modal('show');
  });
</script>

Активирование модального окна с помощью атрибутов data

В Bootstrap 3 и 4 вызов модального окна можно привязать к кнопке или ссылке вообще без написания кода на языке JavaScript. Осуществляется это с помощью атрибутов data-toggle и data-target. Первый атрибут должен содержать значение modal (data-toggle="modal"), которое будет говорить о том, что содержимое, которое будет вызвать этот элемент, является модальным окном. Второй параметр указывает на элемент (data-target="#myModal" или href="#myModal"), а точнее содержит селектор (идентификатор), с помощью которого выбирается контейнер div, который содержит HTML код модального окна.

<!-- Кнопка, вызывающее модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
  <!--...-->
</div>

Открытие модального окна с помощью JavaScript

Вызвать модальное окно можно с помощью кода на языке JavaScript. Для этого в скрипте вызовите метод .modal() с указанием идентификатора (#id) или класса (.class) элемента-контейнера, содержащего HTML-код модального окна.

<!-- Кнопка, открывающая модальное окно -->
<a href="#" class="btn btn-primary">Открыть модальное окно</a>

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
  <!--...-->
</div>

<!-- Скрипт, привязывающий событие click, открывающее модальное окно, к элементам, имеющим класс .btn -->
<script>
$(document).ready(function(){
  //при нажатию на любую кнопку, имеющую класс .btn
  $(".btn").click(function() {
    //открыть модальное окно с id="myModal"
    $("#myModal").modal('show');
  });
});
</script>

Добавление семантики к модальному окну с помощью атрибутов ARIA

Для того чтобы добавить модальному окну семантики, предназначенной в основном вспомогательным технологиям (экранным дикторам и др. пользовательским агентам), можно воспользоваться атрибутами ARIA.

Атрибуты role="dialog" и aria-labelledby="..." добавьте к элементу модального окна, имеющему класс .modal, и атрибут role="document" к элементу, имеющему класс .modal-dialog.

Кроме этого, Вы также можете добавить описание модальному окну посредством атрибута aria-describedby, который необходимо указать элементу, имеющему класс .modal.

Т.к. по умолчанию модальное окно не отображается, то чтобы это отобразить с помощью стандарта WAI-ARIA добавьте атрибут aria-hidden="true" к элементу, имеющему класс .modal.

Описание ролей и свойств ARIA:

  • role="document" - элемент, содержит связанную информацию, которая может выступать как контент документа.
  • role="dialog" - элемент, выступающий в роли диалога (окно, которое предназначено для прерывания текущей работы приложения с целью запроса у пользователя некоторой информацию или требующей от него ответа).
  • aria-labelledby="..." - предназначен для идентификации элемента (или элементов), который содержат краткое название текущего элемента.
  • aria-describedby="..." - предназначен для идентификации элемента (или элементов), который содержит подробное описание текущего объекта.
  • aria-hidden="true" - указывает, что элемент и все его потомки не видимы пользователю.
  • aria-label="..." – содержит описание текущего элемента.
<!-- Кнопка, открывающее модальное окно -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Открыть модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        Содержимое модального окна...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>  

Как убрать анимацию при открытии модального окна

Для того чтобы убрать анимацию, которое сопровождает открытие модального окна, достаточно удалить у него класс .fade.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

Изменение размера модального окна

Платформа Bootstrap 3 и 4 позволяет настраивать размер модального окна. Для этого в этой платформе имеются 2 дополнительных класса: .modal-lg (увеличивает ширину модального окна) и .modal-sm (уменьшает ширину модального окна).

Чтобы изменить размер модального окна один из этих классов необходимо дополнительно поместить рядом с классом .modal-dialog.

<!-- Кнопка, открывающая широкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Открыть ширикое модальное окно </button>
<!-- Широкое модальное окно -->
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!--...-->
    </div>
  </div>
</div>
     
<!-- Кнопка, открывающая узкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Открыть узкое модальное окно </button>
<!-- Узкое модальное окно -->
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!--...-->
    </div>
  </div>
</div>

Использование системы сеток Bootstrap для разметки основного содержимого модального окна

Для того чтобы использовать систему сеток платформы Twitter Bootstrap 3 или 4 внутри модального окна, достаточно разместить в элементе, имеющего класс .modal-body блок div с классом .container-fluid. После этого можно переходить к созданию необходимой разметки, используя классы системы сеток внутри этого контейнера по обычным правилам.

<!-- Модальное окно, основное содержимое которого организовано с использованием системы сеток Bootstrap 3 или 4 -->
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="gridModalLabel">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <!-- основное содержимое (тело) модального окна -->
        <div class="container-fluid">
          <!-- Контейнер, в котором можно создавать классы системы сеток -->
          <div class="row">
            <div class="col-md-6">...</div>
            <div class="col-md-6">...</div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<!-- Кнопка, открывающее модальное окно -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal">
  Открыть модальное окно
</button>

Модальное окно, имеющее динамическую высоту

Если высота модального окна может измениться уже после того когда оно открыто (например, если контент загружается динамически), то чтобы скорректировать его позицию необходимо использовать параметр handleUpdate() метода .modal().

$('#myModal').modal('handleUpdate');

Параметры модального окна

В Bootstrap есть определённые настройки, с помощью которых можно настроить модальное окно. Передача параметров модальному окну осуществляется через атрибуты data или метод .modal().

Имя Тип Описание
backdrop boolean или string 'static' Значение по умолчанию: true. Если установить значение параметра backdrop равное true, то происходит наложение темного фона над всем содержимым веб-страницы, поверх которого отображается модальное окно. Данный эффект используется по умолчанию, для его отмены установите значение backdrop равное false. У данного параметра backdrop есть дополнительное значение 'static', которое запрещает закрывать модальное окно при нажатии за его пределами. Данный параметр также можно установить с помощью data атрибута data-backdrop, например: data-backdrop="static".
keyboard boolean Значение по умолчанию: true. Закрывает модальное окно при нажатии на клавиатуре клавиши Esc. Данный параметр также можно установить с помощью data атрибута data-keyboard.
show boolean Значение по умолчанию: true. Отображает модальное окно сразу после его инициализации. Данный параметр также можно установить с помощью data атрибута data-show.

Метод JavaScript modal() для активации и управления модальным окном

Рассмотрим метод .modal() предназначенный для активации некоторого содержимого как модального окна, а также для его управления.

Имя Описание
.modal(параметры) Активирует контент, указанный с помощью идентификатора или класса как модальное окно. Принимает в качестве параметров следующие значения: backdrop, keyboard, show. Например:
$('#myModal').modal({ 
  backdrop: 'static',
  keyboard: false 
});
.modal('toggle') Вручную переключает модальное окно, т.е. если модально окно открыто, то скрывает его. А если он скрыто, то отображает его. Например:
$('#myModal').modal('toggle');
.modal('show') Вручную открывает модального окно. Например:
$('#myMmodal').modal('show');
.modal('hide') Вручную скрывает модальное окно. Например:
$('#myMmodal').modal('hide');

Например, активируем модальное окно для элемента, имеющего идентификатор #launch-modal:

<script type="text/javascript">
$(document).ready(function(){
  //подпишемся на событие click элемента, имеющего id="#launch-modal"
  $('#launch-modal').click(function() {
    //активируем контент, имеющий id="myModal", как модальное окно 
    $('#myModal').modal({
      //установим модальному окну следующие параметры:
      backdrop: 'static',
      keyboard: true
    });
  }); 
});
</script>

<!-- HTML код кнопки (для отображения модального окна) -->
<input id="launch-modal" type="button" class="btn btn-primary" value="открыть модальное окно">

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
  <!--...-->
</div>

Например, напишем скрипт, который будет открывать модальное окно каждые 5 минут после загрузки страницы:

<script>
  // после полной загрузки страницы
  $(window).load(function() {
    // вызываем метод setInterval, который будет вызывать модальное окно каждые 5 минут, если оно не открыто
    setInterval(function() {
      // Если окно не открыто (т.е. не имеет класс in)
      if (!$("#myModal").hasClass("in")) {
        // то открыть модальное окно 
        $("#myModal").modal('show');
      }
    }, 300000);
  });
</script>

<!-- Модальное окно-->
<div id="myModal" class="modal fade">
  <!--...-->
</div>

Например, создать модальное окно, которое в зависимости от нажатой кнопки имеет то или иное содержимое.

<!-- Кнопки, открывающие модальное окно myModal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content="Содержимое 1...">Открыть модальное окно с содержимым 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content="Содержимое 2...">Открыть модальное окно с содержимым 2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content="Содержимое 1...">Открыть модальное окно с содержимым 3</button>

<!-- Модальное окно myModal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <p id="content"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<script>
// при открытии модального окна
$('#myModal').on('show.bs.modal', function (event) {
  // получить кнопку, которая его открыло
  var button = $(event.relatedTarget) 
  // извлечь информацию из атрибута data-content
  var content = button.data('content') 
  // вывести эту информацию в элемент, имеющий id="content"
  $(this).find('#content').text(content); 
})
</script>

События, связанные с модальным окном

Изменение состояния модального окна (открытие, закрытие) Вы можете получить с помощью следующих событий:

Имя Описание
show.bs.modal Событие происходит, когда вызывается метод show(), предназначенный для открытия модального окна. Если модальное окно вызывается с помощью клика (click), то элемент, который вызвал открытие модального окна, будет доступен как свойство relatedTarget события.
Например:
$('#myMmodal').on('show.bs.modal', function() {
  // сделать что-нибудь...
})
shown.bs.modal Событие происходит, когда модальное окно становится видимым для пользователя, т.е. когда оно будет полностью отрисовано с помощью стилей CSS. Если модальное окно вызывается с помощью клика (click), то элемент, который вызвал открытие модального окна будет доступен как свойство relatedTarget события.
Например:
$('#myMmodal').on('shown.bs.modal', function() {
  // сделать что-нибудь...
})
hide.bs.modal Событие происходит, когда вызывается метод hide(), который предназначен для скрытия модального окна.
Например:
$('#myMmodal').on('hide.bs.modal', function() {
  // сделать что-нибудь...
})
hidden.bs.modal Событие происходит, когда модальное окно становится полностью невидимым для пользователя, т.е. когда будут отработаны полностью все CSS-свойства, выполняющие этот процесс.
Например:
$('#myMmodal').on('hidden.bs.modal', function() {
  // сделать что-нибудь...
})

Например, отобразить сообщение пользователю о том, когда модальное окно будет закрыто (полностью скрыто от пользователя):

<script>
$(document).ready(function(){
  //при нажатию на элемент, имеющий класс .open-modal, открыть модальное окно 
  $('.open-modal').click(function(){
    $('#myModal').modal('show');
  });
  //отобразить сообщение, когда модальное окно будет полностью скрыто от пользователя
  $("#myModal").on('hidden.bs.modal', function(){
    alert("Модальное окно было успешно закрыто.");
  });
});
</script>

<!-- Кнопка, открывающая модальное окно -->
<input type="button" class="btn btn-primary open-modal" value="Открыть модальное окно">

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <p>Содержимое модального окна...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Результат вышепредставленного примера представим в виде следующих изображений:

HTML-страница, на которой расположена кнопка, открывающее модальное окно Bootstrap
Кнопка, открывающее модальное окно Bootstrap
HTML-страница, на которой открыто модальное окно Bootstrap
Открытое модальное окно Bootstrap
HTML-страница, на которой отображён результат отработки события hidden.bs.modal, которое происходит после полного скрытия модального окна
Результат отработки события hidden.bs.modal


   Bootstrap 0    78893 +2

Комментарии (306)

  1. Sergei Zakharov # 0
    Спасибо за уроки, все очень доходчиво и последовательно. Не смог добиться того, чтобы модальное окно закрывалось по кнопке ESC. Атрибут data-keyboard и с true и с false работает одинаково…
    1. Александр Мальцев # 0
      Решить данную проблему можно с помощью добавления атрибута tabindex="-1" к модальному окну.
      Например:
      <div id="myModalBox" class="modal fade" tabindex="-1">
      1. Sergei Zakharov # 0
        Не помогает… :-(
    2. Сергей # 0
      Подскажите, пожалуйста, как сделать чтобы при закрытии модального окна прекращало проигрываться видео (если в контенте ссылка на YouTube). И большое Спасибо за уроки! Очень доступно!
      1. Александр Мальцев # 0
        Сергей, Ваш вопрос не очень понятен. Если ситуацию опишите более подробно или предоставите код на jsfiddle.net, то постараюсь помочь. Особенно интересует момент про контент и ссылку на YouTube.

        На текущий момент, могу предположить, что Вам необходимо написать какой-то код для события «hidden.bs.modal», которые срабатывает при закрытии модального окна.

         $('#myModal').on('hidden.bs.modal', function () {
          // сделать что-нибудь
        })
        
        1. Сергей # 0
          Спасибо, что быстро ответили. Вот ссылка на пример: jsfiddle.net/sega019/zbkjsazs/ Модальное окно закрывается, а видео продолжает играть. Как написать код я не знаю.
          1. Александр Мальцев # 0
            Сергей, используйте следующий код:
            <script>
            $('#myModal').on('hidden.bs.modal', function () {
              $('iframe').attr('src', $('iframe').attr('src'));
            })
            </script>
            
            1. Екатерина # 0
              Спасибо большое. Очень помогло это решение… Много чего перепробовала, но это сработало… Закрывает видео, добавленное с вк через iframe
            2. Александр Мальцев # 0
              А если Вам необходимо с YouTube, то лучше наверно так:
              <script>
              $('#myModal').on('hidden.bs.modal', function () {
                $('iframe[src*="https://www.youtube.com/embed/"]').attr('src', $('iframe').attr('src'));
              })
              </script>
              
              1. Сергей # 0
                Огромное спасибо, очень помогли! Теперь все работает!
                1. Светлый Сергей # 0
                  А как сделать то же, только не с видео, а с удаленным контентом?

                  <img src="image/2kap5m.jpg" alt="" data-toggle="modal" data-target=".modal-gal" data-remote="image/2-kapitans/2-kapitans.html">
                  Нажатие картинки вызывает модальное окно с контентом, находящимся на другой странице.
                  Но после закрытия, другие картинки, открывают то же самое модальное окно.
                  1. Александр Мальцев # 0
                    Добрый день, Сергей.
                    Предоставьте Ваш код на jsfiddle.net.
                    1. Светлый Сергей # 0
                      Прошу прощения, я уже пошел другим путем. Проще сделать несколько модалей на странице.
                2. Андрей # 0
                  Спасибо за код, единственное когда окно закрывается и видео останавливается, после этого снова воспроизвести это видео не удается, ошибка youtube. Начинает работать только когда перезагрузишь страницу. Как это можно исправить?
                  1. Александр Мальцев # 0
                    Попробовал в разных браузерах, у меня ни какой ошибке не возникает.
                    Создай свою ситуацию на jsfiddle.net, посмотрим.
                  2. Афанаьсев Антон # 0
                    Спасибо за уроки! Со многим разобрался благодаря им. Потому поделюсь опытом решения данной проблемы.

                    У меня данная схема не работала. Ролик останавливался, но через некоторое время опять начинал проигрываться в фоне. С Google API не получилось, сделал так:

                    
                    /*iframe youtube для модального окна*/
                    <iframe itemprop="url"  width="100%" height="315"  src="https://www.youtube.com/embed/qgFPwa_EqLc?list=PL9D5aZwT8viJMCzWf_v4gZXY49FiLyeJH" id="yt" frameborder="0" allowfullscreen></iframe>
                    
                    
                    
                    $(document).ready(function () {
                      
                      /*открываем модально окно id=youtube пр клике на img, стартуем ролик*/
                    	  $('#youtube-btn').click(function(){
                    	  	var $modal =  $('#youtube');
                      			$modal.find('.modal-content').load('youtube.tpl', function() {
                        
                    /*#yt - id ifrme ютюба*/
                    	    	var videoURL = $('#yt').prop('src');
                    			videoURL += "&autoplay=1";
                    			$('#yt').prop('src',videoURL);
                    	     $modal.modal('show');
                    	  });
                    	});
                    
                     /*при закрытие модального окна id=youtube останавливаем ролик*/
                    	 $('#youtube').on('hidden.bs.modal', function () {
                      		var videoURL = $('#yt').prop('src');
                    			videoURL = videoURL.replace("&autoplay=1", "");
                    			$('#yt').prop('src','');
                    			$('#yt').prop('src',videoURL);
                     	}) 
                     });
                    
                    
            3. linda # 0
              Спасибо, за урок! Продолжаю осваивать Bootstrap и сайтостроительство в целом.
              Подскажите, пожалуйста, а если на одной странице будет много, модальных окон — это ничего?
              У меня будет сайт-визитка, на нем станица портфолио. Планирую сделать так: Есть маленькая картинка, при клике на которую в модальном окне открывается большая с описанием, заголовком, и кнопками заказать услугу. Или так не делают, а для этого используют другие инструменты. Буду благодарна, если кто ответит. Ну и насколько я понимаю, совершенно не важно, что будет открывать модальное окно: ссылка, кнопка, изображение?
              1. Александр Мальцев # 0
                Добрый день, linda.
                Использовать много модальных окон, которые будут выполнять одну и ту же задачу – это не очень хорошо. Обычно используют одно модальное окно и JavaScript.

                Во втором вопросе Вы совершенно правы. Для открывания диалоговых окон Вы можете использовать любой HTML элемент.

                Если Вы не знаете JavaScript, то делайте так как Вы понимаете. Со временем Вы всегда сможете переделать, улучшить и доработать свой проект. На мой взгляд, самое главное сделать, чтобы Ваш сайт визитка работал, а какими путями Вы этого добьётесь совершенно не важно :)
              2. Timur # 0
                А как разместить на одной странице два модальных окна с разным контентом?
                1. Александр Мальцев # 0
                  Чтобы при нажатии на кнопку открывалось конкретное диалоговое окно, его необходимо указать в атрибуте data-target.
                  Например:
                  <!-- Кнопка 1 с data-target="#modal1" -->
                  <button data-target="#modal1" type="button" class="btn btn-primary" data-toggle="modal">Кнопка1</button>
                  <!-- Модальное окно с id="modal1" -->
                  <div id="modal1" class="modal fade" tabindex="-1" role="dialog">
                  ...
                  </div>
                  
                  <!-- Кнопка 2 c data-target="#modal2" -->
                  <button data-target="#modal2" type="button" class="btn btn-primary" data-toggle="modal">Кнопка2</button>
                  <!-- Модальное окно с id="modal2" -->
                  <div id="modal2" class="modal fade" tabindex="-1" role="dialog">
                  ...
                  </div>
                  
                  Т.е. data-target указывает цель (диалоговое окно), которое будет открываться при нажатии на кнопку (кнопка1 с data-target="#modal1" — диалоговое окно с id=«modal1», кнопка2 с data-target="#modal2" — диалоговое окно с id=«modal2»).
                2. Nick # 0
                  У меня на одной странице используется 15+ форм, к каждой я обращаюсь по id и соответственно для каждой написан свой код ява скрипт. Можно ли как то избавиться от однотипного кода превратив его в функцию и по нажатию кнопки отправки передавать параметры с id формы с которой производить чтение данных?
                  1. JD # 0
                    Можно. Вам необходимо при отправке формы вызывать скрипт (для каждой формы событие отправления $('form').onsubmit = function(){} ). А в функции получать id формы (var id = $(this).attr(«id») ). И от этого плясать.
                  2. Александр # 0
                    Доброго дня! Сейчас опишу свою проблему… Есть таблица MySQL, на страницу данные выводятся через while. Допустим у нас три строчки, есть поле «id», поле с «ссылкой на картинку», и поле «описание». Я хочу добиться того, чтобы при нажатии на выведенный с таблицы id открывалось модальное окно, в котором будет картинка и описание соответствующее этому id. Иными словами, мне нужно выводить в модальное окно данные из таблицы. Как этого добиться? Заранее спасибо!
                    1. Александр Мальцев # 0
                      Добрый день!

                      Таблица:
                      <table class="table">
                        <thead>
                          <tr>
                            <th>id</th>
                            <th>Ссылка на картинку</th>
                            <th>Описание</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>photo1.png</td>
                            <td>Описание</td>
                          </tr>
                          <tr>
                            <th scope="row">1</th>
                            <td>photo2.png</td>
                            <td>Описание</td>
                          </tr>
                          ...
                        </tbody>
                      </table>
                      


                      Модальное окно:
                      <!-- id="myModal"-->
                      <div id="myModal" class="modal fade">
                      <!-- ... -->
                        <!--Тело модального окна -->
                        <div class="modal-body">
                          <!-- Вывод картинки -->
                          <img src="photo1.png">
                          <!-- Описание картинки -->     
                          <p></p>
                        </div>
                      <!-- ... -->
                      </div>
                      


                      Ну и само решение — скрипт на JavaScript:
                      <script>
                      //Данные таблицы (ссылка и описание)
                      var datarow = new Array(2);
                      //При нажатии на id таблицы
                      $(".table tbody th").click(function() {
                        var $row = $(this).closest("tr"),        
                          $tds = $row.find("td");            
                        $.each($tds, function(index) {        
                          //Сохраняем данные строки      
                          datarow[index]=$(this).text();        
                      });
                      //в атрибуте src картинки указываем href из таблицы
                      $("#myModal div.modal-body img").attr("src",datarow[0]);
                      //в p выводим описание картинки из таблицы
                      $("#myModal div.modal-body p").text(datarow[1]);
                      //открываем модальное окно
                      $("#myModal").modal();
                      });
                      </script>
                      
                      1. Александр # 0
                        Благодарю за ответ, но дело в том, что у меня данные находятся в таблице MySQL, и мне нужно подгружать данные из нее в модальное окно в зависимости на какой id я нажму. Нажимаю на id1, вылезает модальное окно с картинкой 1 и описанием 1, закрываю его. Далее нажимаю на id2, и окно уже с другим данными, соответствующие mysql запросу по WHERE `id` = '2'
                        Нечто подобное реализовано в мобильной версии сайта сервиса Steam, сейчас покажу на картинках.
                        На первой картинке изображен инвентарь и содержимое (загружается из базы mysql). Допустим, у первого желтого сундука id = 1, кликаем по нему.
                        _https://itchief.ru/assets/uploadify/0/7/c/07cdfb4a7f848e1c709063f738c996cds.jpg
                        и получаем это:
                        _https://itchief.ru/assets/uploadify/e/3/7/e3701a8018090de63569a82b3552152ds.jpg
                        Далее закрываем, и кликаем на оружие, которое под ним, допустим там id = 4
                        и в модальное окно загружается из базы уже другая информация, и получаем это:
                        _https://itchief.ru/assets/uploadify/3/c/5/3c5e7bfb99b72d2ea5c4a6b78279db64s.jpg
                        1. Александр Мальцев # 0
                          Ну, тогда необходимо использовать технологию AJAX + серверный сценарий.
                          Принцип такой:
                          1. Используем вышеприведённый скрипт до строки $(«myModal ..., т.е. до вывода модального окна. Эта часть нам нужна чтобы получить id на который нажал пользователь.
                          2. Далее пишем AJAX скрипт (load.php < — серверный скрипт, который будет обрабатывать Ваш запрос, data < — параметры, success < — при успехе).
                          $.ajax({ 
                            type: "POST",
                            url: "load.php",
                            data: "id="+datarow[0],
                            success: function(data){
                              $("#myModal div.modal-body").html(data);
                            }
                          });
                          
                          3. Вставляем оставшийся скрипт, т.е. открытие модального окна.

                          Ну и конечно нужно написать обработку на стороне сервера (например, файл load.php).
                          <?php
                          //Подключаемся к БД ...
                          //Выбираем данные из таблицы в соответствии с запросом
                          $query = "select * from img where id=".$_REQUEST['id']."";
                          //Получаем результат и формируем ответ
                          $result = mysql_query($query) or die(mysql_error());
                          while ($row=mysql_fetch_array($result)) {
                            print "<img src=".$row['img'].">";
                            print "<p>".$row['text']."</p>";
                          }
                          ?>
                          Как-то так :)
                          
                          1. Александр # 0
                            Большое спасибо за наводку, что там вообще ajax + серверная часть. Методом тыка я все-же осилил это, так как только начал вообще разбираться в JS, в самом php еще более менее. Но у меня вроде получилось немного не так. load.php остался в принципе без изменений, сама страница с данными выводит все строки из таблицы также через while, далее я просто к названию цепляю ссылку с параметром вызова модального окна и параметром onclick=«send(тут get id для каждой строчки)», ну и в самом модальном окне уже просто DIV с результатом.
                            Сам отдельный js который обрабатывает функцию и отправляет ее в обработчик тоже вроде не изменился
                            function send(mydata){
                                   $.ajax({
                                            type: "POST",
                                            url: "load.php",
                                            data: "data="+mydata,
                                            // Выводим то что вернул PHP
                                            success: function(html) {
                                                    $("#result").empty();
                                                    $("#result").html(html);
                                            }
                                    });
                            }
                            Ну и js окна самый простой там. Без вас я бы не разобрался! Хорошо, что нашел данный ресурс. Впервые вижу, чтобы администратор помогал «смертным» :D
                            Еще раз спасибо!
                    2. Виталий # 0
                      Здравствуйте!
                      Спасибо за примеры.
                      У меня такой вопрос может постой, но я не могу найти решение. Как закрыть модальное окно сразу после нажатия кнопки submit.
                      1. Александр Мальцев # 0
                        Здравствуйте, Виталий!
                        Попробуйте обновиться до последней версии Bootstrap, т.к. модальное окно и так по умолчанию должно закрываться, если Вы нажали на кнопку, у которой type=«submit». Модальное окно Bootstrap не будет закрываться только в том случае, если эта кнопка расположена вне формы:
                        <form>...</form>
                        Поэтому также попробуйте проверить свой код.

                        Ну, если Вам из перечисленных советов ни чего не помогло, то добавьте событие click на кнопку отправки.
                        <script>
                        $('button[type="submit"]').on('click',function() {
                            $('#myModal').modal('hide');
                        });
                        </script>
                        
                        1. Виталий # 0
                          Увы не работает. Я так понял type=«submit» имеет приоритет и до выполнения функции дело не доходит.
                          1. Виталий # 0
                            Победил вот таким способом. В Ajax.BeginForm() на событие OnSuccess повесил $("#myModal").modal(«hide»);
                            Если вешал на кнопку, то с первого раза не срабатывала, а только со второго.
                            Спасибо Chief за наметку.
                      2. Виталий # 0
                        Спасибо за ответ. Я попробую.
                        1. Виталий # 0
                          Версия v3.3.4 вроде последняя, Кнопка находится не в обычной форме а в Ajax.BeginForm(). Хотя думаю разницы нет.
                          1. Дмитрий # 0
                            Здравствуйте, подскажите пожалуйста, а сделать та, чтобы при нажатия на кнопу запуска она, начинался загружаться информер в этом окне, а ода оно зарывается, то данные информера перестают поступать?

                            Ситуация такая, имею несколько информеров которые работают в реальном времени, од этих информеров находится в html файле, вот этот файл и хотелось бы выводить в модельном окне…
                            Без этой функции, этот информер начинает загружаться вместе со страницей, это плохо для скорости загрузи сайта, хотелось бы научить модальное оно загружать информер только тогда, ода пользователь запускает само оно…
                            Надеюсь на вашу помощь, заранее огромное спасибо.
                            1. Александр Мальцев # 0
                              Здравствуйте, Дмитрий.
                              Для указания удалённого источника используйте атрибут href.
                              Также необходимо ещё указать модальное окно с помощью атрибута data-target, в котором будет отображаться содержимое этого источника.
                              <a data-toogle="modal" href="remote.html" data-target="#myModal">Ссылка</a>
                              
                              <!-- Модальное окно, в котором будет отображаться содержимое remote.html -->
                              <div class="modal fade" id="myModal">
                              ...
                              </div>
                              
                            2. Дмитрий # 0
                              Здравствуйте Chief я даже не надеялся на помощь, спасибо!
                              Пробую сделать но ничего не выходит, я по полный ноль( все сделал как вы сказали, но файл указанный в href открывается не в модальном окне, вы не могли бы сделать готовое окно? Очень прошу, а то я сам никак не смогу…
                              Заранее огромное спасибо!
                              1. Александр Мальцев # 0
                                Готовый пример можете загрузить по следующей ссылке.
                                1. Дмитрий # 0
                                  Спасибо за помощь, но что-то не работает, содержимое индекса 2 и 3 не отображается, модальное окно выходит пустым(
                                  1. Евгений # 0
                                    здравствуйте! в вашей ссылке с архивом не корректно отображается окно, то есть не выводит в окне заголовок формы, кнопки отправить, кнопка закрытия, как мне добиться того что бы из внешнего файла отображалось именно весь контент, делаю вход, регистрация, восстановления пароля из внешних файлов, желательно сократить код по максимуму. помогите очень прошу!
                                    1. Евгений # 0
                                  2. Дмитрий # 0
                                    Ребята, помогите пожалуйста, что я только не делал, не получается((
                                    1. Дмитрий # 0
                                      Все работает НО только в мозиле, а в опере и яндекс браузерах не работает, можно как то сделать под эти браузеры???
                                      1. Александр Мальцев # 0
                                        Эта стандартная возможность, она работает во всех браузерах.
                                        Просто в браузерах Chrome, Yandex и возможно в некоторых других используется такая политика безопасности совместного использования ресурсов (cross origin) что она не позволяет использоваться ресурсы по протоколу file:///.

                                        Bootstrap - не работает функция remote у компонента modal

                                        Когда Вы выложите свой проект на сервер, то там будет уже использоваться протокол http или https. У вас всё будет работать. Так как данная политика безопасности браузера будет разрешать загружать данные ресурсы с этих протоколов.
                                        1. Дмитрий # 0
                                          К сожалению не работает на хостинге, может на нем что-то отключено? Смотрю через фаербуг и не вижу такого как вы показали на скрине(
                                          Что еще можно сделать??
                                      2. Дмитрий # 0
                                        Ураа))) все работает, я сам же натупил, и не тот файл подключал))
                                        Chief Вам огромное человеческое спасибо!!!)
                                        И такой еще не смертельный вопрос)
                                        Имею вот такую ссылку кнопки закрытия
                                        <a class="trigger" href="#"></a>
                                        она закрывает выдвижную панель, как к этой кнопке пристроить что-то что бы она и модальное окно закрывала??
                                        1. Александр Мальцев # 0
                                          Написать код на JavaScript с использованием библиотеки jQuery:
                                          $(document).ready(function() {
                                            $(".trigger").click(function() {
                                              //где myModal - id модального окна
                                              $("#myModal").modal("hide");
                                            });
                                          });
                                          
                                          1. Дмитрий # +1
                                            Chief спасибо что помогаете мне, все остальные просто отказались, и не забрасывайте свой проект, такие точно нужны людям!!!
                                            А на счет этого скрипта что вы написали, что-то у меня не получилось, никак не могу понять как его подключить…

                                            Вот скрипт который вызывает боковую панель:
                                            <script type="text/javascript">
                                            $(document).ready(function(){
                                            	$(".trigger").click(function(){
                                            		$(".panel11").toggle("fast");
                                            		$(this).toggleClass("active");
                                            		return false;
                                            	});
                                            });
                                            </script>
                                            А вот скрипт который вызывает Модальное окно:
                                            <script>
                                            $('#myModal').on('hide.bs.modal', function() {
                                                $(this).removeData();
                                              });
                                            </script>
                                            Никак не могу понять на что смотреть(
                                            1. Александр Мальцев # 0
                                              Добавьте эту строку в ваш скрипт:
                                              <script type="text/javascript">
                                              $(document).ready(function(){
                                                $(".trigger").click(function(){
                                                  $(".panel11").toggle("fast");
                                                  $(this).toggleClass("active");
                                                  //закрывает модальное окно
                                                  $("#myModal").modal("hide");
                                                  return false;
                                                });
                                              });
                                              </script>
                                              
                                              1. Дмитрий # 0
                                                Chief что-то не работате, мне уже стыдно вас напрягать, я думаю оставлю так как есть да и все…
                                                Вам и вашему сайту, большое спасибо, развивайтесь!
                                        2. Денис # 0
                                          Здравствуйте! Создаю модальное окно, хочу изменить размер, дописываю к modal-dialog modal-lg.НО окно все равно стандартного размера остается, как исправить
                                          1. Александр Мальцев # 0
                                            Здраствуйте, Денис. Попробуйти обновить Вашу версию Bootstrap до 3.3.4.
                                          2. Анатолий # 0
                                            Скажите а как сделать так же как у вас, чтобы контент при открытии модального окна не дергался. Вот у вас на этой странице справа есть скролл и когда нажимаешь на кнопку открытия модального окна, то при появлении модального окна скролл исчезает, но контент при этом не дергается, подскажите, пожалуйста, как вы это сделали?
                                            1. Александр Мальцев # 0
                                              Ничего не делал :) Просто вызвал его.
                                              Это стандртаное модальное окно фреймворка Twitter Bootstrap.
                                            2. Анатолий # 0
                                              Да я понимаю, что это стандартное окно. У меня раньше на сайте стояла версия Twitter Bootstrap 3.2.0, так вот мне она казалась стабильнее что ли, короче говоря если где то модальное окно дергалось, то я вставлял вот такой вот скриптик:
                                              <script type="text/javascript"><!--
                                              $(".modal").on("show.bs.modal", function(){
                                                  var $bodyWidth = $("body").width();
                                                  $("body").css({'overflow-y': "hidden"}).css({'padding-right': ($("body").width()-$bodyWidth)});
                                              });
                                              
                                              $(".modal").on("hidden.bs.modal", function(){
                                                  $("body").css({'padding-right': "0", 'overflow-y': "auto"});
                                              });
                                              --></script>
                                              
                                              И все, модальное окно не дергалось ни где.

                                              Теперь блин взял и обновил на свою голову Twitter Bootstrap до версии 3.3.1
                                              и все этот скриптик не помогает, окно всегда дергается, уже весь мозг вынес, не могу добиться, чтобы окно не дергалось, х.з. как сделать.
                                              1. Александр Мальцев # 0
                                                Тут скорее сказывается виляние других стилей, которые вы подключаете к своей веб-странице. И скорее всего влияние CSS свойства top…
                                                Вам необходимо открыть панель разработчика в браузере, проанализировать исходный код страницы и найти причину.

                                              2. Joker_V # 0
                                                Спасибо Вам огромное! Побольше б таких сайтов как Ваш!
                                                1. Den # 0
                                                  Мучаюсь второй день :(
                                                  Кнопка есть но ничего не открывается.Пробовал в разных шаблонах, разные модальные окна… везде есть кроме моего шаблона((
                                                  jsfiddle.net/wy6ah8L1/ — может кто поможет ?? потомучто даже в этом онлайн-редакторе у меня тоже не получается открыть окно.Скорей всего дело в разметке и присвоения каких-то конфликтующих классов или же в таблице стилей… Я новичок… Заранее спасибо за помощь!
                                                  1. Александр Мальцев # 0
                                                    Не подключена библиотека jQuery и bootstrap.min.js:
                                                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                                                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                                                    
                                                    http://jsfiddle.net/itchief/wy6ah8L1/4/
                                                    1. Den # 0
                                                      Спасибо огромное! Как всегда выручаете ))
                                                  2. bazilar # 0
                                                    После нажатия кнопки вызова модального окна — смещяется вправо хэдер — в чем может быть проблема ??
                                                    1. Александр Мальцев # 0
                                                      Проверьте как у Вас осуществляется позиционирование и свойство left.
                                                    2. bazilar # 0
                                                      Прошу прощения за глупый вопрос: позиционирование блока с модальным окном или хедера? Тоже самое со свойством left — какого элемента?
                                                      1. Александр Мальцев # 0
                                                        Это просто предположение. Если приведёте вашу ситуацию на jsfiddle.net, то тогда будет понятно, как Вам помочь. А то как-то по картинке сложно судить…
                                                        А так, скорее всего вам необходимо проверить свойство left блока, который смещается…
                                                      2. bazilar # 0
                                                        Салют! Возник еще вопрос:
                                                        как в модальное окно получить данные например ID=«100» ??? Этот айди формируется в цикле и может принимать любые произвольные!!!
                                                        Код тут: jsfiddle.net/wy6ah8L1/8/

                                                        заранее спасибо!!!
                                                        1. Александр Мальцев # 0
                                                          Не совсем понятен вопрос, но алгоритм действий будет следующий.

                                                          Чтобы получить значение атрибута у одного элемента и передать его в другой элемент необходимо:
                                                          1. Получить элемент, содержащий необходимые данные:
                                                          $("#100"); //- получить элемент по его id="100"
                                                          
                                                          2. Получить у него значение атрибута, например id:
                                                          var myID = $("#100").attr("id");
                                                          
                                                          3. Получить элемент, в который необходимо вывести это значение:
                                                          // вывести в элемент, имеющий id="hh3", содержимое переменной myID
                                                          $("#hh3").text(myID); 
                                                          
                                                          Итоговый код:
                                                          var myID = $("#100").attr("id");
                                                          $("#hh3").text(myID);
                                                          
                                                        2. АлексейВитальевич # 0
                                                          Добрый, Chief, сверстал сайт на бутстрапе. Есть одна проблема при вызове модального окна «navbar-fixed-top» дергается. Кто нибудь сталкивался с такой проблемой?
                                                          1. Александр Мальцев # 0
                                                            Добрый день.
                                                            Посмотрел Ваш сайт. При открытии модального окна у Вас к элементу с id=«header-top» добавляется padding-rigth: 17px в скрипте. Попробуйте это убрать.
                                                            1. АлексейВитальевич # 0
                                                              Спасибо то что не оставили в беде, как раз я его туда и добавил чтобы решить проблему(только собирался написать, опередили). Без него меню дергалось. и Спасибо за ваш сайт многому научился здесь.
                                                          2. julja # 0
                                                            Есть модальное окно из след. кодца:
                                                            jsfiddle.net/anohvrg8/5/
                                                            Проблема в том, что при нажатии на кнопку окно видно долю секунды, а затем оно сворачивается. Подскажите в чем может быть проблема? А еще хотелось бы подробнее узнать об атрибутах, как tabindex="-1" role=«dialog» aria-labelledby=«myModalLabel» aria-hidden=«true», которые указаны в примере на оффсайте и у вас в примере про размеры окон, но пояснения особого нет.
                                                            1. Александр Мальцев # 0
                                                              Ваше окно хоть и выполнено не корректно, но открывается и закрывается у меня без нареканий. Попробуйте решить проблему, отключив в браузере различные расширения типа adblock. Если это не поможет, то поищите проблему с помощью панели разработчиков в веб-браузере. Т.к. у Вас проблема скорее не с этим кодом, а с чем-то другим.

                                                              Атрибут tabindex. Атрибут tabindex определяет позицию текущего элемента при табуляции. Табуляция – это последовательность при передачи фокуса между определёнными элементами веб-страницы с помощью клавиши Tab. По умолчанию табуляция осуществляется между элементами в порядке их следования на веб-странице. Данный атрибут используется, чтобы нарушить этот порядок. Т.е. Вы можете указать, какой элемент первый получит фокус, какой второй и т.д. Например, если Вы укажите некоторому элементу атрибут tabindex со значением 1, то он будет выбран первым при нажатии клавиши tab на странице. Т.е. значение атрибута определяет порядок табуляции (1 -> 2 -> 3 и т.д.).
                                                              Кроме этого данный атрибут имеет специальные значения:
                                                              • 0 – особое значение. Если оно установлено элементу, то переход к данному элементу будет осуществлять после всех переходов (1 -> 2 -> 3 и т.д.) и после всех элементов с индексом 0 или без индекса (что одно и то же), которые идут в исходном коде до него.
                                                              • -1 – это тоже особое значение. Если вы его установите элементу, то Вы на его не сможете перейти с помощью клавиши Tab. Т.е. данный элемент выпадет из табуляции.
                                                              Атрибут role. Атрибут, добавленный в HTML 5 и предназначенный для поисковых роботов, который указывает назначение блока. role=«dialog» – указывает, что данный блок является диалоговым окном.
                                                              Атрибуты aria-labelledby и aria-hidden предназначены для вспомогательных технологий, например, таких, которые читают веб-страницы голосом. Т.е. они помогают этим технологиям (программам) более правильно прочитать ваш сайт, т.е. делают его более доступным для людей с ограниченными возможностями.
                                                              aria-labelledby – предназначен для указания идентификатора (метки) модального окна.
                                                              aria-hidden — предназначен для того, чтобы указать скрыт элемент или нет. Если, например его значение равно true, то программа не будет читать его содержимое пользователю.

                                                            2. abgar2000 # 0
                                                              Доброе время суток.
                                                              Спасибо за Ваш сайт!
                                                              Форма в модальном окне.
                                                              На submit — окно сразу закрывается, не успев отобразть благодарность за сообщение.
                                                              Скажите, имеется ли возможность установить задержку перед закрытием? Click — не отменяем, иначе форма не отправится.
                                                              1. Александр Мальцев # 0
                                                                Привет! Спасибо за твой отзыв.

                                                                Код, который задерживает отправку форму на 1 секунду:
                                                                <!--Форма-->
                                                                <form>
                                                                  <input type="submit">
                                                                </form>
                                                                <!--Сообщение-->
                                                                <div class="alert alert-warning" role="alert" style="display:none;">
                                                                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                  </button>
                                                                  Сообщение
                                                                </div>
                                                                
                                                                <!--JavaScript-->
                                                                <script>
                                                                //переменная message, отвечающая за логику задержки
                                                                var message = false;
                                                                
                                                                $(function() {
                                                                  $('form').submit(function(event) {
                                                                    //если переменная равна true, т.е. задержка выполнена
                                                                    if (message==true) {
                                                                      //присвоить переменной message значение false
                                                                      message=false;
                                                                      //отправить форму
                                                                      return;
                                                                    }
                                                                    //отобразить окно с сообщением
                                                                    $("div.alert").show();
                                                                    //установить таймер
                                                                    setTimeout(showMessage,1000);
                                                                    //отменить стандартное действие браузера при отправке формы
                                                                    event.preventDefault();
                                                                  });
                                                                });
                                                                
                                                                //функция, которая вызывается после 1 секунды методом setTimeout
                                                                function showMessage() {
                                                                  //присвоить переменной message значение true
                                                                  message=true;
                                                                  //скрыть окно с сообщением
                                                                  $("div.alert").hide(); 
                                                                  //вызвать событие submit
                                                                  $('form').submit();
                                                                }
                                                                </script>
                                                                
                                                              2. Владимир # 0
                                                                Добрый день!
                                                                Два окна. После закрытия первого окна всплывает второе. Код использую такой
                                                                <script type="text/javascript">
                                                                $('.modal').modal('hide'); // закрывает первое окно
                                                                $('.modal').on('hidden.bs.modal', function(){
                                                                   setTimeout(function() {
                                                                     $('#success-modal').modal('show');
                                                                   }, 1000);
                                                                });
                                                                </script>
                                                                При закрытии второго оно снова через секунду появляется. Подскажите пожалуйста как сделать чтобы второе окно не открывалось после клика на overlay или на кнопку закрытия. Ну или само закрылось через какое-то время
                                                                1. Александр Мальцев # 0
                                                                  Добрый день, Владимир!

                                                                  Код:
                                                                  <!--Первое модальное окно-->
                                                                  <div id="modal1" class="modal fade">...</div>
                                                                  <!--Второе модальное окно-->
                                                                  <div id="modal2" class="modal fade">...</div>
                                                                  
                                                                  <script>
                                                                  //при нажатии кнопки с id="save" в модальном окне 1, выполнить...
                                                                  $('#save').click(function() {
                                                                    $('#modal1').modal('hide');
                                                                    //после скрытия модального окна 1, выполнить...
                                                                    $('#modal1').on('hidden.bs.modal', function(){
                                                                      //установить таймер 1, который сработает после закрытия модального окна 1 через 1 секунду... 
                                                                      setTimeout(function() {
                                                                        //таймер 1 отобразить модальное окно 2
                                                                        $('#modal2').modal('show');
                                                                      }, 1000);
                                                                      //установить таймер 2, который сработает после закрытия модального окна 1 через 4 секунды...
                                                                      setTimeout(function() {
                                                                        //таймер 2 скроет модальное окно 2
                                                                        $('#modal2').modal('hide');
                                                                      }, 4000);
                                                                    });
                                                                  });
                                                                  </script>
                                                                  
                                                                  1. Владимир # 0
                                                                    Александр, спасибо за готовое решение!
                                                                    Проблему решил, но код немного другой получился.
                                                                2. Maksim # 0
                                                                  Здравствуйте Александр!

                                                                  есть скрипт валидации (Вы его писали в одном из уроков):
                                                                  <script>
                                                                    $(function() {
                                                                      $('#send').click(function() {
                                                                        var formValid = true;
                                                                        $('#Quest input').each(function() {
                                                                         var formGroup = $(this).parents('.form-group');
                                                                        var glyphicon = formGroup.find('.form-control-feedback');
                                                                        if (this.checkValidity()) {
                                                                          formGroup.addClass('has-success').removeClass('has-error');
                                                                          glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove');
                                                                        } else {
                                                                          formGroup.addClass('has-error').removeClass('has-success');
                                                                          glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok');
                                                                         formValid = false;  
                                                                        }
                                                                      });
                                                                      if (formValid) {
                                                                        $('#Quest').modal('hide');
                                                                        $('#success-alert').removeClass('hidden');
                                                                           window.setTimeout(function () { 
                                                                                              $("#success-alert").alert('close'); }, 10000);
                                                                      }
                                                                    });
                                                                  });
                                                                  </script>
                                                                  
                                                                  Проблема в том, что он работает правильно если у button тип button, а если тип submit — окно закрывается и сообщение не отправляется. Можно было бы оставить класс button, но появляется другая проблема. Если в IE11 в незаполненной форме нажать button и попробовать скроллить окно, оно неприятно скролится вместе с фоном. Проблему можно решить прописав body.modal-open свойство position:fixed, но это костыль и на длинных страницах тоже выглядить не совсем хорошо. Что можно добавить в скрипт, чтобы он корректно срабатывал на button с типом submit и отображал alert?
                                                                  1. Maksim # 0
                                                                    UPD: проблема со скроллингом модали в IE11 оказалась глубже и корнями исходит из другой.
                                                                    при открытии модального окна, скрипт Bootstrap добавляет body padding-right:17px (это можно увидеть через FireBug). В результате элементы navbar top сдвигаются. чтобы пофиксить я добавил в CSS:
                                                                    html {  overflow: hidden;   height: 100%; }
                                                                    body { overflow: auto; height: 100%; }
                                                                    body.modal-open {overflow: hidden;position: relative;width: 100%;}
                                                                    .modal-open { overflow: auto; }
                                                                    
                                                                    теперь открывается нормально в IE, FF и Chrome на десктопах и IE на WP.
                                                                    1. Александр Мальцев # 0
                                                                      17px — это ширина прокрутки. Она предназначена для того чтобы не было сдвига контента вправо при открытии модального окна, т.к. в некоторых браузерах полосы прокрутки занимают реальное пространство.
                                                                      Использовав Ваш стиль, контент основной страницы в Chrome 44 при открытии модального окна смещается вправо на 17px. Т.к. полоса прокрутки в Chrome 44 занимает ширину рабочей области.
                                                                      В браузере IE11 при открытии модального окна padding-right:17px к body не добавляется, т.к. в этом браузере полоса прокрутки не занимает рабочего пространства, а располагается поверх его. Т.е. Bootstrap учитывает какой используется браузер и определяет добавлять padding-right:17px к body или нет.
                                                                      Для теста использовал Bootstrap 3.3.5.
                                                                      1. Сергей # 0
                                                                        А как тогда побороть сдвиг в navbar, по крайней мере в фиксированном варианте?
                                                                        1. Александр Мальцев # 0
                                                                          Сергей, это можно сделать только с помощью JavaScript. Т.е. необходимо определить ширину скроллбара (т.к. Bootstrap его тоже рассчитывает и он скорее всего оно не везде 17px) и отнимает ли он место у рабочего пространства браузера. А уже после этого решать задавать или не задавать отступы navbar.
                                                                          Предлагаю такое решение, проверил его только в нескольких браузерах:
                                                                          //Определяем ширину скроллбара
                                                                          //1.Создать узел с помощью которого будем определять ширину скроллбара в браузере
                                                                          var scrollDiv = document.createElement("div");
                                                                          //2.Добавить к элементу класс .modal-scrollbar-measure для того чтобы к нему можно было применить стили
                                                                          scrollDiv.className = "modal-scrollbar-measure";
                                                                          //3.Добавляем узел в body
                                                                          document.body.appendChild(scrollDiv);
                                                                          //4.Получаем ширину скроллбара в браузере
                                                                          var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
                                                                          //5.Удаляем элемент div
                                                                          document.body.removeChild(scrollDiv);
                                                                          
                                                                          //Определяем занимает ли скроллбар ширину рабочей области
                                                                          var fullWindowWidth = window.innerWidth
                                                                          if (!fullWindowWidth) { 
                                                                            var documentElementRect = document.documentElement.getBoundingClientRect()
                                                                            fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
                                                                           }
                                                                          if (document.body.clientWidth >= fullWindowWidth) {
                                                                            scrollbarWidth = 0;
                                                                          };
                                                                          
                                                                          // При открытии модального окна
                                                                          $('.modal').on('show.bs.modal', function () {
                                                                            //если скроллбар имеет ширину
                                                                            if (scrollbarWidth > 0) {
                                                                              //то устанавливаем отступы, равные ширине скроллбара
                                                                              $(".navbar").css("padding-right", scrollbarWidth);
                                                                            }
                                                                          });
                                                                          
                                                                          // При закрытии модального окна устанавливаем значение 0
                                                                          $('.modal').on('hidden.bs.modal', function () {
                                                                            $(".navbar").css("padding-right", "0px");
                                                                          });
                                                                          
                                                                          CSS:
                                                                          .modal-scrollbar-measure {
                                                                            position: absolute;
                                                                            top: -9999px;
                                                                            width: 50px;
                                                                            height: 50px;
                                                                            overflow: scroll;
                                                                          }
                                                                          
                                                                          1. Алекс # 0
                                                                            Не работает ваш вариант, как было смещение так оно и есть, скрипт как я понял нужно дописать в bootstrap.js? Или я что-то не так понял?

                                                                            1. Алекс # 0
                                                                              Как я только не пытался побороть это смещение, ничего не выходило. Я очень долго пытался определить место этого гребаного смещения пока сюда не зашел. Тут конечно играет роль мое плохое знание .js, но решил проблему самым простым способом для меня. Тут человек выше наисал что нужно в стили добавить вот это:

                                                                              html { overflow: hidden; height: 100%; }
                                                                              body { overflow: auto; height: 100%; }
                                                                              body.modal-open {overflow: hidden;position: relative;width: 100%;}
                                                                              .modal-open { overflow: auto; }

                                                                              Взял отсюда только это:

                                                                              html { overflow: hidden; height: 100%; }
                                                                              body { overflow: auto; height: 100%; }
                                                                              body.modal-open {overflow: hidden;position: relative;width: 100%;}

                                                                              Но при этом у меня сместилось меню в на 17 пикселей на постоянку, добавил к стилю меню смещение на 17px в обратную сторону и вуаля все работает.
                                                                              1. Александр Мальцев # 0
                                                                                Попробуй свой вариант проверить в Internet Explorer 11, там скроллбар не имеет ширины и располагается поверх страницы.
                                                                                Может что-то изменилось…

                                                                                Из-за этого мне в своё время и не получилось решить данную проблему простыми стилями без js.
                                                                                1. Андрей # 0
                                                                                  Дописал стили по данной рекомендации. На десктопе в разных браузерах всё стало ОК, но в мобильных браузерах при скроллинге перестало скрываться вверх поле адресной строки. Учитывая и без того небольшой экран это не очень хорошо. Есть-ли какое-нибудь решение?
                                                                                  1. Александр Мальцев # 0
                                                                                    Попробуйте не использовать эти выкрутасы. А расположить HTML-код модального окна сразу за открывающим тегом body.
                                                                      2. Александр Мальцев # 0
                                                                        Здравствуйте, Максим!
                                                                        Да, я что-то не обратил внимание, что кнопка находится вне формы.
                                                                        Поправьте код на следующий:
                                                                        <!-- Модальное окно -->
                                                                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
                                                                          <div class="modal-dialog">
                                                                            <div class="modal-content">
                                                                              <!-- Заголовок модального окна -->
                                                                              <div class="modal-header">
                                                                                <button type="button" class="close" data-dismiss="modal">×</button>
                                                                                <h4 class="modal-title" id="myModalLabel">Регистрация</h4>
                                                                              </div>
                                                                              <!-- Форма для регистрации -->      
                                                                              <form role="form" class="form-horizontal">
                                                                                <!-- Основная часть модального окна, содержащая форму для регистрации -->
                                                                                <div class="modal-body">
                                                                        	  <!-- Блок для ввода логина -->
                                                                        	  <div class="form-group has-feedback">
                                                                        	    <label for="login" class="control-label col-xs-3">Логин:</label>
                                                                        	    <div class="col-xs-6">
                                                                        	      <div class="input-group">
                                                                        	        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>         
                                                                        	        <input type="text" class="form-control" required="required" name="login" pattern="[A-Za-z]{6,}">
                                                                        	      </div>
                                                                        	      <span class="glyphicon form-control-feedback"></span>
                                                                        	    </div>
                                                                        	  </div>
                                                                        	  <!-- Блок для ввода email -->
                                                                        	  <div class="form-group has-feedback">
                                                                        	    <label for="email" class="control-label col-xs-3">Email:</label>
                                                                        	    <div class="col-xs-6">
                                                                        	      <div class="input-group">
                                                                        	        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                                                        	        <input type="email" class="form-control" required="required" name="email">
                                                                        	      </div>
                                                                        	      <span class="glyphicon form-control-feedback"></span>
                                                                        	    </div>
                                                                        	  </div>
                                                                                  <!-- Конец блока для ввода email-->
                                                                                </div>
                                                                                <!-- Нижняя часть модального окна -->
                                                                                <div class="modal-footer">
                                                                                  <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
                                                                                  <button id="save" type="submit" class="btn btn-primary">Регистрация</button>
                                                                                </div>
                                                                              </form>
                                                                            </div>
                                                                          </div>
                                                                        </div>
                                                                        
                                                                      3. Евгений # 0
                                                                        Шеф, привет. Подскажи, пожалуйста, как можно поместить внутрь модального окна код от RsForm или аналога?
                                                                        А то использую стандартные возможности с помощью
                                                                        <?php JHTML::_('behavior.modal', 'a.fancy', array('handler' => 'ajax')); ?>
                                                                        и далее

                                                                        <p><a class="btn btn-danger fancy" href="/index.php/component/rsform/form/3?tmpl=component" rel="{handler: 'iframe', size: {x: 421, y: 570}, onClose: function() {}}">Заявка на банкет »</a></p>
                                                                        Смотрится убого((( и тормозит
                                                                        1. Александр Мальцев # 0
                                                                          Я не работаю в системе CMS Joomla!, поэтому помочь Вам не смогу. Может кто-то из посетителей сайта кто знаком с Joomla! что-нибудь Вам подскажет.
                                                                        2. Иван # 0
                                                                          Подскажите, а как сделать что бы модальное окно не выпадало, а появлялось из середины?
                                                                          1. Александр Мальцев # 0
                                                                            1. Убрать класс fade (анимацию) у модального окна:
                                                                            
                                                                            <a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-
                                                                            
                                                                            toggle="modal">fadeIn</a>
                                                                            <div id="myModal1" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModal" 
                                                                            
                                                                            aria-hidden="false">
                                                                              <div class="modal-dialog">
                                                                                <div class="modal-content">
                                                                                  <div class="modal-header">
                                                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                                    <h4 class="modal-title" id="myModalLabel">заголовок модального окна</h4>
                                                                                  </div>
                                                                                  <div class="modal-body">
                                                                                    <p>Содержимое модального окна...</p>
                                                                                  </div>
                                                                                  <div class="modal-footer">
                                                                                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
                                                                                    <button class="btn btn-primary">Сохранить изменения</button>
                                                                                  </div>
                                                                                </div>
                                                                              </div>
                                                                            </div>
                                                                            
                                                                            2. Скачать и подключить анимационный движок Velocity (velocity.min.js.zip).

                                                                            3. Добавить свою анимацию к модальному окну:
                                                                            <script>
                                                                            // добавление анимации к модальному окну
                                                                            $(".modal").each(function(index) {
                                                                              $(this).on('show.bs.modal', function (e) {
                                                                                $('.modal-dialog').velocity({defaultDuration: 700, opacity: [1,0], transformOriginX: ["50%","50%"], transformOriginY: ["50%","50%"], scaleX: [1,0.625], scaleY: [1,0.625], translateZ: 0 });
                                                                              });
                                                                            });
                                                                            </script>
                                                                            
                                                                            Демо модальных окон с анимацией (velocity.js)
                                                                          2. Валентин # 0
                                                                            не подскажите как часть содержимого подгружаемого файла вывести в модальном окне, перечитал уже кучу мануалов и пересмотрел видео, но так и не нашел как решить.
                                                                            if (json['true']) {
                                                                            $('#content1').load('files/test.php #content2');
                                                                            при такой конструкции в первом файле содержимое #content1 заменяется на #content2 из подгружаемого файла, а вот как это в popup вывести не пойму. Пробовал создавать отдельный див с определенными размерами, в него тоже выводится по id или class, но если я ему пропишу display:none, то ничего не происходит. Без указания ширины и высоты, но без display:none, тоже ничего не выводится. Что не так делаю?
                                                                            1. Александр Мальцев # 0
                                                                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                                                                Открыть модальное окно
                                                                              </button>
                                                                              
                                                                              <div class="modal fade" id="myModal" tabindex="-1">
                                                                                <div class="modal-dialog">
                                                                                  <div class="modal-content">
                                                                                    <div class="modal-header">
                                                                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                                                      <h4 class="modal-title" id="myModalLabel">Заголовок модального окна</h4>
                                                                                    </div>
                                                                                    <div class="modal-body">
                                                                                    </div>
                                                                                  </div>
                                                                                </div>
                                                                              </div>
                                                                              
                                                                              <script>
                                                                              if (json['true']) {
                                                                                $('.modal-body').load('files/test.php #content2');
                                                                              
                                                                              1. Валентин # 0
                                                                                все оказалось проще некуда, спасибо! все работает.
                                                                                1. Валентин # 0
                                                                                  Еще такой небольшой вопрос, можно ли исключить из подгружаемого блока некоторые элементы, например с тегом
                                                                                  <h1>
                                                                                  или придется все построчно подключать?
                                                                                  1. Александр Мальцев # 0
                                                                                    С помощью CSS селекторов.
                                                                                    Например:
                                                                                    1. Выбрать в элементе с id=«content2» все элементы кроме h1:
                                                                                    $('.modal-body').load('files/test.php #content2:not(h1)');
                                                                                    
                                                                                    2. Выбрать все элементы p, расположенные в id=«content2»:
                                                                                    $('.modal-body').load('files/test.php #content2 p');
                                                                                    
                                                                                    Познакомиться как можно выбирать элементы с помощью селекторов можно начиная с этого урока: jQuery — Основные селекторы
                                                                                    1. Валентин # 0
                                                                                      странно оно себя ведет, исключает только принадлежащий этому классу элемент т.е.
                                                                                      $('.modal-body').load('files/test.php #content2:not(div)');
                                                                                      где <div id="content2">...
                                                                                      то соответственно выведется пустое окно, но на все вложенные теги не реагирует никак и выводится все без исключений:
                                                                                      div#content2:not(p) - нет реакции
                                                                                      #content2:not(p) - нет реакции
                                                                                      пробовал по разному, даже класс указывать #content2:not(h1.MyClass) 0 реакции, никаких исключений, выводится все.

                                                                                      И еще момент, не назначается дополнительный класс к подключаемому файлу, внутри документа все адекватно работает т.е. может есть какие-то особые правила с внешними файлами, делаю вроде все по мануалу, а работает выборочно
                                                                                      $('.modal-body').load('files/test.php div#content2', {function(e){$(this).toggleClass("MyClass");}});
                                                                                      
                                                                                      $('.modal-body').load('files/test.php #content2', {function(e){$(this).toggleClass("MyClass");}});
                                                                                      не назначает
                                                                                      1. Александр Мальцев # 0
                                                                                        Валентин, извини, допустил ошибку.
                                                                                        Будет вот так (т.е. все кроме h1):
                                                                                        $('.modal-body').load('files/test.php #content2 *:not(h1)');
                                                                                        
                                                                                        Второй вопрос. А с чего Вы решили, что класс будет переключаться. Этот код у Вас выполнится только один раз при или после загрузке документа. Т.е. при открытии модального окна он выполняться не будет.
                                                                                        Чтобы этот код вызывался каждый раз, его Вам необходимо привязать, например, к кнопке открывающей модальное окно. В этом случае данный код будет каждый раз выполняться и соответственно класс MyClass будет переключаться у элементов .modal-body.
                                                                              2. Евгений # 0
                                                                                Здравствуйте,
                                                                                подскажите почему видео в редакторе останавливается а на проекте нет?
                                                                                https://jsfiddle.net/rfxn2nzw/
                                                                                1. Евгений # 0
                                                                                  С одним разобрался, видео останавливается, но при попытке открыть новое или это же оно перекидывает на самое первое видео, точнее на первый фрейм который находиться на первой вкладке, и не имеет отношения с youtub…
                                                                                2. Евгений # 0
                                                                                  как в этом коде сделать так что бы видео возвращалось на само себя?
                                                                                  $('#myModal').on('hidden.bs.modal', function () {
                                                                                    $('iframe[src*="https://www.youtube.com/embed/"]').attr('src', $('iframe').attr('src'));
                                                                                  });
                                                                                  
                                                                                  1. Александр Мальцев # 0
                                                                                    Здравствуйте, Евгений.
                                                                                    Данный код и так при скрытии модального окна присваивает атрибуту src элемента iframe его же значение. Ну, если Вы используете данный код, то Вам необходимо каким-то образом его доработать, т.е. чтобы он выбирал нужный Вам элемент iframe. В противном случае он выберет первый элемент iframe, который данный код найдёт на вашей странице.

                                                                                    Например, можно сделать так, присвоить необходимому элементу iframe идентификатор (id) со значением video1:
                                                                                    <iframe id="video1" width="380" height="240" src="https://www.youtube.com/embed/evmV2Z62TPs" frameborder="0" allowfullscreen></iframe>
                                                                                    
                                                                                    И соответственно изменить код JavaScript так чтобы он осуществлял работу с iframe, который имеет идентификатор video1:
                                                                                    $('iframe#video1[src*="https://www.youtube.com/embed/"]').attr('src', $('iframe#video1').attr('src'));
                                                                                    
                                                                                    1. Евгений # 0
                                                                                      Александр Мальцев

                                                                                      Спасибо вам огромное! все работает!

                                                                                      Я в JS совсем никак, а тут потребовалось… и изучать как обычно времени нет.
                                                                                  2. Дмитрий # 0
                                                                                    Здравствуйте Шеф!
                                                                                    Спасибо за Ваш труд.

                                                                                    Вопрос такой:
                                                                                    Как сделать так, чтобы при нажатии кнопки «Заказать» на модальном окне появлялось а) либо новое модальное окно с формой заказа, а старое закрывалось; б) либо в этом же окне подгружалась другая страница (нечто вроде пошагового визарда)?
                                                                                    1. Александр Мальцев # 0
                                                                                      Здравствуйте, Дмитрий.
                                                                                      Спасибо, за Ваш отзыв.
                                                                                      Вот решение для варианта a:
                                                                                      <!-- 2 Модальное окно, содержащее заказ -->
                                                                                      <div class="modal fade" id="modal-order" tabindex="-1">
                                                                                        <!--...-->
                                                                                      </div>
                                                                                      
                                                                                      <!-- Кнопка открывающее 1 модальное окно -->
                                                                                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                                                                        Открыть 1 модальное окно
                                                                                      </button>
                                                                                      
                                                                                      <!-- Первое модальное окно -->
                                                                                      <div class="modal fade" id="myModal" tabindex="-1">
                                                                                        <!--...-->
                                                                                            <div class="modal-footer">
                                                                                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                              <button id="btn-order" type="button" class="btn btn-primary">Заказать</button>
                                                                                        <!--...-->
                                                                                      </div>
                                                                                      
                                                                                      <script>
                                                                                      //при нажатии на кнопку Заказать
                                                                                      $("#btn-order").click( function() {
                                                                                        // скрыть 1 модальное окно
                                                                                        $("#myModal").modal("hide");
                                                                                        // открыть 2 модальное окно
                                                                                        $("#modal-order").modal("show");
                                                                                      });
                                                                                      </script>
                                                                                      
                                                                                      1. Дмитрий # 0
                                                                                        Скрипт работает, только почему-то сколится не модальное окно, а сам сайт под модальным окном. Как сделать чтобы скролл был на модальном окне?

                                                                                        Спасибо
                                                                                        1. Александр Мальцев # 0
                                                                                          Походу стили не успевают отрабатывать.
                                                                                          Попробуйте изменить скрипт на следующий:
                                                                                          <script>
                                                                                          $(function() {
                                                                                            //переменная showModalOrder
                                                                                            var showModalOrder = false;
                                                                                            //при нажатии на кнопку Заказать
                                                                                            $("#btn-order").click( function() {
                                                                                              //отобразить модальное окно #modal-order
                                                                                              showModalOrder = true;
                                                                                              //скрыть 1 модальное окно
                                                                                              $("#myModal").modal("hide");
                                                                                            });
                                                                                            //после скрытия 1 модального окна
                                                                                            $("#myModal").on('hidden.bs.modal', function () {
                                                                                              //если переменная showModalOrder равна true, то
                                                                                              if (showModalOrder==true) {
                                                                                                //отобразить модальное окно, содержащее заказ
                                                                                                $("#modal-order").modal("show");
                                                                                                //присвоить переменной showModalOrder значение false
                                                                                                showModalOrder = false
                                                                                              }
                                                                                            });
                                                                                          });
                                                                                          </script>
                                                                                          
                                                                                    2. Павел # 0
                                                                                      Добрый вечер Шеф!!!
                                                                                      Большое спасибо за Ваш сайт и за ваши ответы! Всегда пользуюсь Вашим сайтом если что не понятно.

                                                                                      Проблема такая, сижу третий день пытаюсь разобраться.

                                                                                      Нужно связать скрипт выборки bootstrap Typeahead с bootstrap (модального окна) Modals. Надо чтобы отображалось окно при правильном нахождении в форме Typeahead поиска, и также отображалось при не нахождении! Когда выборка найдено правильное значение true то отображается окно например с текстом «Ваш адрес есть в базе», и false «Вашего адреса нет в базе».

                                                                                      Зарание спасибо!!!

                                                                                      Посмотреть кодкод формы:
                                                                                      <input type="text" class="form-control" id="inputUserEditCountry" placeholder="Country" value="" data-provide="typeahead" />
                                                                                      <input type="text" class="form-control" id="inputUserEditCity" placeholder="City" value="" data-provide="typeahead" />
                                                                                      код скрипта:
                                                                                      // Typehead inputUserEditCountry
                                                                                      $('#inputUserEditCountry').typeahead({
                                                                                        source: ["Россия","Украина","Белоруссия"]
                                                                                      });
                                                                                      // Typehead inputUserEditType
                                                                                      $('#inputUserEditCountry').change(function() {
                                                                                        if ($('#inputUserEditCountry').val() === 'Россия') {
                                                                                          $('#inputUserEditCity').typeahead('destroy');
                                                                                          $('#inputUserEditCity').typeahead({
                                                                                            source: ["Москва","Санкт-Петербург","Екатеринбург","Самара","Болготова","Новгород"]
                                                                                          });
                                                                                        }
                                                                                        else if ($('#inputUserEditCountry').val() === 'Украина') {
                                                                                          $('#inputUserEditCity').typeahead('destroy');
                                                                                          $('#inputUserEditCity').typeahead({
                                                                                            source: ['Киев','Харьков','Донецк','Днепропетровск']
                                                                                          });
                                                                                        }
                                                                                        else if ($('#inputUserEditCountry').val() === 'Белоруссия') {
                                                                                          $('#inputUserEditCity').typeahead('destroy');
                                                                                          $('#inputUserEditCity').typeahead({
                                                                                            source: ['Минск','Брест','Гродно','Лида']
                                                                                          });
                                                                                        }
                                                                                      });
                                                                                      
                                                                                      1. Александр Мальцев # 0
                                                                                        Здравствуйте, Павел!
                                                                                        Можно сделать так:
                                                                                        1. Добавить кнопку «Проверить»
                                                                                        <button id="btn1">Проверить</button>
                                                                                        
                                                                                        2. добавить модальное окно (привожу только часть кода):
                                                                                        <div class="modal fade" id="myModal" tabindex="-1">
                                                                                        <!--...-->
                                                                                        </div>
                                                                                        
                                                                                        3. Добавить такой скрипт:
                                                                                        var inputUserEditCity = $('#inputUserEditCity');
                                                                                        
                                                                                        $("#btn1").click( function() {
                                                                                          var current = inputUserEditCity.typeahead("getActive");
                                                                                          if (inputUserEditCity.val()!= current) {
                                                                                            $("#myModal div.modal-body").text("Вашего адреса нет в базе");
                                                                                          }
                                                                                          else {
                                                                                            $("#myModal div.modal-body").text("Ваш адрес есть в базе");
                                                                                          }
                                                                                          $('#myModal').modal('show');
                                                                                        });
                                                                                        
                                                                                        Данный скрипт запускается при нажатии на кнопку «Проверить». Он проверяет ближайшее совпадающее значение поля (inputUserEditCity) с текущим. В зависимости от результата он изменяет содержимое элемента div, имеющего класс .moda-body. После этого он отображает модальное окно.
                                                                                        1. Павел # 0
                                                                                          Доброе утро Шеф! Подскажите как вставить чаек mods revolution вместо сообщении об «Ваш адрес есть в базе». Зарание спасибо!
                                                                                          1. Александр Мальцев # 0
                                                                                            Здравствуйте Павел!
                                                                                            Ваш вопрос какой-то не корректный. Если Вы хотите что-то получить с сервера, то надо воспользоваться технологией AJAX. Т.е. Вы получаете данные от пользователя, передаёте их на сервер, там обрабатываете, и получаете какой-то результат, который затем отображаете в модальном окне пользователю. Как-то так…
                                                                                      2. Константин # 0
                                                                                        Здравствуйте Шеф. Очень интересный у вас сайт!
                                                                                        Как сделать модальное окно, чтобы оно появлялось при загрузки страницы и чтобы в этом модальном окне отображался обратный отсчет в виде таймера. Допустим таймер на 20 секунд и после этого окно должно само закрыться.
                                                                                        1. Александр Мальцев # 0
                                                                                          Здравствуйте, Константин.
                                                                                          Спасибо за Ваш отзыв.

                                                                                          Данная проблема решается следующим кодом:
                                                                                          <div class="modal fade" id="myModal" tabindex="-1">
                                                                                            <div class="modal-dialog" role="document">
                                                                                              <div class="modal-content">
                                                                                                <div class="modal-body">
                                                                                                  <p id="time"></p>
                                                                                                  <p>Содержимое модального окна</p>
                                                                                                </div>
                                                                                              </div>
                                                                                            </div>
                                                                                          </div>
                                                                                          
                                                                                          <script>
                                                                                          // идентификатор таймера
                                                                                          var timer;
                                                                                          // количество секунд
                                                                                          var start = 20;
                                                                                          
                                                                                          //функция, которая выполняется каждую секунду
                                                                                          function hideModal() {
                                                                                            // уменьшаем количество установленных секунд на 1
                                                                                            start = start - 1;
                                                                                            // если время закончилось то скрываем модальное окно
                                                                                            if (start == 0 ) {
                                                                                              // прекратить работу таймера
                                                                                              clearInterval(timer);
                                                                                              // скрыть модальное окно
                                                                                              $("#myModal").modal('hide');
                                                                                            }
                                                                                            // выводим количество оставшихся секунд
                                                                                            $("#time").text(start);
                                                                                          }
                                                                                          
                                                                                          // функция которая выполняется после загрузки страницы
                                                                                          $(function() {
                                                                                            // открываем модальное окно
                                                                                            $("#myModal").modal('show');
                                                                                            // когда модальное окно отобразилось запускаем таймер
                                                                                            $('#myModal').on('shown.bs.modal', function () {
                                                                                              timer = setInterval(hideModal,1000);
                                                                                            });
                                                                                          });
                                                                                          </script>
                                                                                          
                                                                                        2. Павел # 0
                                                                                          Все срабатывает!!!

                                                                                          Большое спасибо Шеф за помощь и за сайт!!! Буду пробовать дальше!!!))))
                                                                                          1. Константин # 0
                                                                                            Инструкцию читал по поводу show и hidemodal. Но как все это было соединить не знал. Просто класс. Спасибо большое!

                                                                                            Шеф еще подскажите как сделать, чтобы это модальное окно показывало один раз в сутки
                                                                                            Я так понимаю надо подключить jqery.cookie. На некоторых сайтах есть описание, но там все по английски
                                                                                            1. Александр Мальцев # 0
                                                                                              Это можно сделать с помощью LocalStorage.
                                                                                              Достаточно изменить код функции с предыдущего примера на следующий:
                                                                                              $(function() {
                                                                                                // получить значение даты из LocalStorage
                                                                                                var dateModalShow = localStorage.getItem("dateModalShow");
                                                                                                // получить значение текущей даты
                                                                                                var currentDate = new Date().toLocaleDateString();
                                                                                                // если значение даты в LocalStorage равно null или
                                                                                                // не равно текущей даты 
                                                                                                // (т.е. если модальное окно сегодня не показывалось, то)
                                                                                                if (dateModalShow=null || dateModalShow!=currentDate) {  
                                                                                                  // открываем модальное окно
                                                                                                  $("#myModal").modal('show');
                                                                                                  // сохраняем дату открытия модального окна в LocalStorage
                                                                                                  localStorage.setItem("dateModalShow", currentDate);
                                                                                                }
                                                                                                $('#myModal').on('shown.bs.modal', function () {
                                                                                                  timer = setInterval(hideModal,1000);
                                                                                                });
                                                                                              });
                                                                                              
                                                                                            2. Константи # 0
                                                                                              Шеф спасибо за разъяснения и помощь. Я настроил на свой вкус, все работает. Выглядит четко!
                                                                                              1. Антон # 0
                                                                                                Добрый день. Не могу решить проблему.

                                                                                                Вызываю модальное окно. При нажатие кнопки вызова окна (в зависимости от того, какой кнопкой окно вызывалось в textarea прописывается текст)

                                                                                                  $("button").click(function(){
                                                                                                            
                                                                                                              
                                                                                                              text = $(this).attr('name');
                                                                                                              
                                                                                                              if(text!='fakelink'){
                                                                                                              $('#content').text('');
                                                                                                              if(text=='К1106') text='Артикул:  К1106 ';
                                                                                                              if(text=='К1104') text='Артикул:  К1104';
                                                                                                              if(text=='К1101') text='Артикул:  К1101';
                                                                                                              if(text=='К1108') text='Артикул:  К1108';
                                                                                                              
                                                                                                              $('#content').append(''+text); 
                                                                                                              }
                                                                                                                
                                                                                                                            });
                                                                                                
                                                                                                Если закрыть окно стандартными средствами модального окна (нажать на крестик, на фон или ESC), то далее работает все как нужно. Т.е. при нажатие на кнопку заполняется текст. Если закрыть окно
                                                                                                $("#zayav").modal('hide');
                                                                                                
                                                                                                Поля перестают заполняться, и у полей imput перестает работать placeholder=«Ваш номер телефона».

                                                                                                Как правильно закрыть модальное окно?
                                                                                                Спасибо.
                                                                                                1. Антон # 0
                                                                                                  Извините, не актуально. Была ошибка в моей части кода.
                                                                                                2. Владимир # 0
                                                                                                  Александр, добрый день!
                                                                                                  Ситуация следующая. Имеем страницу оформления заказа. При выборе определенного способа доставки отмечается соответствующий способ оплаты и появляется модальное окно с сообщением и двумя кнопками («Согласен» и «Не согласен»). При нажатии на «Согласен» модальное окно просто закрывается и покупатель дальше оформляет заказ. При нажатии на «Не согласен» — окно закрывается и сбрасываются выбранные способ доставки и оплаты.
                                                                                                  Проблема следующая, если нажать на «Не согласен», перейти на любую другую страницу сайта, а потом вернуться на страницу оформления окно покажется снова (хотя чеки сбрасываются).

                                                                                                  Код использую такой:
                                                                                                  var hideYesModal = $.cookie('hideYesModal');
                                                                                                  // если выбран определенный способ доставки
                                                                                                  if ($('input[name=shipping_method]:checked').val() == 'russianpost_insured.parcel_insured') {
                                                                                                    // и если не установлены cookie
                                                                                                    if(hideYesModal == null){
                                                                                                      // через 1 секунду показываем модальное окно
                                                                                                      setTimeout(function() {
                                                                                                        $("#soglashenie-nalogka").modal('show');
                                                                                                      }, 1000);
                                                                                                    }
                                                                                                    // отмечаем способ оплаты
                                                                                                    $('input[name=payment_method]').prop('checked', true);
                                                                                                    // в модальном окне при нажатии на кнопку "Да" устанавливаем cookie
                                                                                                    // для этой кнопки и удаляем cookie установленные ранее для кнопки "Нет"
                                                                                                    $('.button_yes').click(function(){
                                                                                                      $.cookie('hideYesModal', 'true');
                                                                                                      $.cookie('hideNoModal', null, { expires: -1 } );
                                                                                                    });
                                                                                                    // при нажатии на кнопку "Нет"
                                                                                                    $('.button_no').click(function(){
                                                                                                      // снимаем выбранные способы доставки и оплаты
                                                                                                      $('input[name=shipping_method]').prop('checked', false);
                                                                                                      $('input[name=payment_method]').prop('checked', false);
                                                                                                      // для этой кнопки устанавливаем cookie
                                                                                                      $.cookie('hideNoModal', 'true');
                                                                                                      // скрываем модальное окно
                                                                                                      $("#soglashenie-nalogka").modal('hide');
                                                                                                    });
                                                                                                  // если выбраны другие способы оплаты, то модальное окно не показываем и удаляем все cookie  
                                                                                                  } else {
                                                                                                    $("#soglashenie-nalogka").modal('hide');
                                                                                                    $.cookie('hideYesModal', null, { expires: -1 } );
                                                                                                    $.cookie('hideNoModal', null, { expires: -1 } );
                                                                                                  }

                                                                                                  Подскажите пожалуйста, где проглядел.
                                                                                                  1. Александр Мальцев # 0
                                                                                                    Здравствуйте, Владимир.

                                                                                                    У Вас при выборе способа доставки, открывается модальное окно (#soglashenie-nalogka), если значение переменной hideYesModal ($.cookie('hideYesModal')) равно null.

                                                                                                    Но когда Вы нажимаете на кнопку Нет, Вы устанавливаете ключу 'hideNoModal' значение 'true' и нигде больше его не используете. Т.е. у Вас ключ 'hideNoModal' предназначен только для сохранения значения…

                                                                                                    Попробуйте изменить условие открытие модального окна на следующее:
                                                                                                    if (hideYesModal == null || hideNoModal == null || hideNoModal == undefined) {
                                                                                                    
                                                                                                    1. Владимир # 0
                                                                                                      Спасибо, Александр!
                                                                                                      Бьюсь бьюсь, потом спрошу (вот например у вас) и дальше продолжаю биться. Иногда не дожидаясь ответа решаю сам))). Только что решил данную задачу и все задуманное работает.

                                                                                                      P.s. Если бы еще код можно было под spoiler прятать, было круто?
                                                                                                  2. Борис # 0
                                                                                                    Добрый день!
                                                                                                    Обращаюсь к Вам, так как пока это единственный сайт где объясняете понятно и доходчиво для всех, в моем понимании.
                                                                                                    У меня такого рода проблема, мне нужно, чтобы модальное окно открывалось через какое-то время после открытия index, при отправке формы обязательное прохождение валидации и при обновлении страницы index, не открывалось модальное окно какое-то время. Помогите если это возможно. Мучаюсь неделю.
                                                                                                    1. Борис # 0
                                                                                                      Код отправить не получается.
                                                                                                      1. Борис # 0
                                                                                                        Код:
                                                                                                        <!-- besplatzvon -->
                                                                                                        <div id="blockPopup">
                                                                                                          <div id="popup">
                                                                                                            <div class="avatar"><img class="img-circle" src="img/av_m.jpg" width="200" height="200" /></div>
                                                                                                            <div><h3>Могу ли я помочь?</h3>
                                                                                                              Введите Ваши данные:
                                                                                                            </div>
                                                                                                            <form method="post"  action="mail.php">
                                                                                                            <div>
                                                                                                              <p><input class="input-sm" type="text" name="name" required placeholder="Имя"/></p>                     
                                                                                                            </div>
                                                                                                            <div>
                                                                                                              <p><input class="input-sm" type="tel" name="tel" required minlength="12" maxlength="12" placeholder=" +7 (945) 00-00-00"/></p>
                                                                                                            </div>
                                                                                                            <div>
                                                                                                              <p>Наш специалист свяжется с вами!</p>
                                                                                                              <p>Это бесплатно!</p>
                                                                                                            </div>                     
                                                                                                            <div>
                                                                                                              <button id="setCookie" class="btn btn-default" type="submit" >Перезвоните мне</button>
                                                                                                            </div>
                                                                                                          </form>
                                                                                                          <a class="close" title="Закрыть" onclick="document.getElementById('blockPopup').style.display='none', document.getElementById('bb').style.display='block';"></a>
                                                                                                        </div>
                                                                                                        </div>
                                                                                                        <div>
                                                                                                        <a id="bb"  onclick="document.getElementById('blockPopup').style.display='block', document.getElementById('bb').style.display='none';"></a>
                                                                                                        </div>
                                                                                                        <!--/ besplatzvon -->
                                                                                                        
                                                                                                        1. Борис # 0
                                                                                                          Ещё код:
                                                                                                          //button
                                                                                                          $(document).ready(function(){
                                                                                                              
                                                                                                              $("#setCookie").click(function () {
                                                                                                                  var date = new Date();
                                                                                                                  date.setTime(date.getTime() + (60 * 1000));
                                                                                                                  $.cookie("popup", "", {expires: date} );
                                                                                                                  $("#blockPopup").hide();
                                                                                                                  $("#bb").show();
                                                                                                              });
                                                                                                          
                                                                                                                   if ( $.cookie("popup") == null ) {
                                                                                                                          setTimeout(function(){
                                                                                                                          $("#blockPopup").show();
                                                                                                                          }, 8000)
                                                                                                                   }
                                                                                                                  else { $("#blockPopup").hide(), $("#bb").show();
                                                                                                                  }
                                                                                                          
                                                                                                          });
                                                                                                          
                                                                                                          1. Александр Мальцев # 0
                                                                                                            Добрый день, Борис!

                                                                                                            У Вас это и так всё это реализовано.

                                                                                                            Единственное что Вам необходимо сделать, это поменять обработчик события click на submit. Данное событие у Вас будет возникать перед отправкой формы на сервер.

                                                                                                            Т.е. необходимо выполнить следующее:

                                                                                                            1. Добавить идентификатор к элементу form, например target:
                                                                                                            <form id="target" method="post" action="mail.php">
                                                                                                            
                                                                                                            2. Изменить метод click на submit, и, конечно же селектор:
                                                                                                            $("#target").submit(function() {
                                                                                                            
                                                                                                          2. Борис # 0
                                                                                                            Огромное спасибо, все работает!
                                                                                                            Я только учусь js и как бы понимаю синтаксис и структуру написания scriptov но не могу найти нормальный справочник с описанием методов свойств и т. д… Может Вы подскажите ссылку на такой справочник, что бы было понятно даже мне (чайнику).
                                                                                                            1. Александр Мальцев # 0
                                                                                                              Борис, я в основном использую jQuery API.
                                                                                                              Другого ни чего не подскажу (т.к. не пользуюсь), попробуй поискать через поиск в Яндексе.
                                                                                                              А так заглядывай сюда, со временем напишу и про остальные методы так, чтобы было понятно начинающим.

                                                                                                            2. Максим # 0
                                                                                                              Столкнулся с интересной проблемой.
                                                                                                              Пользователи любят нажимать Enter и модальное окно закрывается.
                                                                                                              Как сделать чтобы не закрывалось?

                                                                                                              Поясню: на модальном окне сделана форма ввода, там пару input text, и пару select — с подключенным select2
                                                                                                              и когда производишь поиск в селект2, набирая несколько букв, то предложенный вариант вполне себе по Enter выбирается и при этом закрывается модальное окно. Как победить?
                                                                                                              1. Александр Мальцев # 0
                                                                                                                Максим, попробуйте повесить на необходимые элементы действие, отменяющее стандартное поведение браузера (preventDefault).
                                                                                                                Например как-то так:
                                                                                                                <script>
                                                                                                                $(function() {
                                                                                                                  $(".modal-body input").keypress(function(event) {
                                                                                                                    if (event.keyCode == 13) {
                                                                                                                      event.preventDefault();
                                                                                                                    }
                                                                                                                  });
                                                                                                                });
                                                                                                                </script>
                                                                                                                
                                                                                                                1. Максим # 0
                                                                                                                  Спасибо!
                                                                                                                  Сделал немного по другому.

                                                                                                                  <div class="form-group" onkeypress="return event.keyCode != 13;">
                                                                                                                  А многострочный input text перенес в отдельный form-group, у которого не стал отменять нажатие Enter, иначе это не дает строки переносить :-)
                                                                                                                  1. Maksim # 0
                                                                                                                    Здравствуйте.
                                                                                                                    скорее всего, модальное окно закрывает не enter, а button c типом submit. если тип поменять на button и отправку данных делать по другому то все в порядке.
                                                                                                                    1. Александр Мальцев # 0
                                                                                                                      Здравствуйте.
                                                                                                                      Отправка формы при нажатии клавиши Enter — это стандартное поведение браузера.
                                                                                                                      На мой взгляд лучше всего не переопределять клавишу Enter, а написать некоторую проверку валидности заполненной формы. Если форма валида, то и пусть она отправляется по Enter, а если нет, то показывать ошибки и отменять её отправку.
                                                                                                                      $("#myform").submit(function(event) {
                                                                                                                        //проверка формы
                                                                                                                        ...
                                                                                                                        //если результат отрицательный, то отменить
                                                                                                                        if (checkForm==false) {
                                                                                                                          //показать пользователю поля которые заполнены неправильно
                                                                                                                          event.preventDefault();
                                                                                                                        }
                                                                                                                      });
                                                                                                                      
                                                                                                              2. Борис # 0
                                                                                                                Александр добрый день!
                                                                                                                Пытаюсь написать калькулятор перевозки грузов, если не сложно подскажите пожалуйста как правильно составить массив городов и расстояний между ними.
                                                                                                                Код:
                                                                                                                <!-- calculator -->
                                                                                                                     <div class="container calculator">
                                                                                                                            <h3>РАССЧЕТ ДОСТАВКИ ГРУЗА</h3>
                                                                                                                            <hr class="featurette-divider"/>
                                                                                                                            <form role="form">
                                                                                                                                <label class="col-md-5 control-label">Пункт отправки</label>
                                                                                                                                 <div class="form-group col-md-5">                  
                                                                                                                                    <select class="form-control">
                                                                                                                                        <option>Выбрать город</option>
                                                                                                                                        <option>Москва</option>
                                                                                                                                        <option>Санкт-Петербург</option>
                                                                                                                                        ........
                                                                                                                                        <option>Чита</option>
                                                                                                                                        <option>Владивосток</option>
                                                                                                                                    </select>
                                                                                                                                 </div>
                                                                                                                                 <label class="col-md-5 control-label">Пункт доставки</label>
                                                                                                                                 <div class="form-group col-md-5">                  
                                                                                                                                    <select class="form-control">
                                                                                                                                        <option>Выбрать город</option>
                                                                                                                                        <option>Москва</option>
                                                                                                                                        <option>Санкт-Петербург</option>
                                                                                                                                        .......
                                                                                                                                        <option>Чита</option>
                                                                                                                                        <option>Владивосток</option>
                                                                                                                                    </select>
                                                                                                                                 </div>
                                                                                                                                 <label class="col-md-5 control-label">Вид транспорта</label>
                                                                                                                                 <div class="form-group col-md-5">                  
                                                                                                                                    <select class="form-control">
                                                                                                                                        <option>Вид транспорта</option>
                                                                                                                                        <option>Тентованная</option>
                                                                                                                                        <option>Изотерма</option>
                                                                                                                                        <option>Рефрижератор</option>
                                                                                                                                        <option>Бортовая</option>
                                                                                                                                        <option>Прицеп</option>
                                                                                                                                    </select>
                                                                                                                                  </div>
                                                                                                                                  <label class="col-md-5 control-label">Количество</label>
                                                                                                                                  <div class="form-group col-md-5">                  
                                                                                                                                    <input type="text" class="form-control" />
                                                                                                                                 </div>
                                                                                                                                 <label class="col-md-5 control-label">Единица измерение</label>
                                                                                                                                 <div class="form-group col-md-5">
                                                                                                                                    <select class="form-control">
                                                                                                                                        <option>Все</option>
                                                                                                                                        <option>кг.</option>
                                                                                                                                        <option>тн.</option>
                                                                                                                                    </select>
                                                                                                                                 </div>
                                                                                                                               
                                                                                                                                 <hr class="featurette-divider"/>
                                                                                                                                 <div>
                                                                                                                                 Растояние: 2450 километров.<br />               
                                                                                                                                 Стоимость: 110 000 руб.<br />
                                                                                                                                 Стоимость единицы груза: 5000 руб\тонна<br />                 
                                                                                                                                 </div>
                                                                                                                            </form>
                                                                                                                        </div>
                                                                                                                        <!-- / calculator -->
                                                                                                                
                                                                                                                1. Александр Мальцев # 0
                                                                                                                  Здравствуйте, Борис.

                                                                                                                  1. Добавить к элементу select (Пункт отправки) идентификатор — point-sending:
                                                                                                                  <select id="point-sending" class="form-control">
                                                                                                                  
                                                                                                                  2. Добавить к элементу select (Пункт доставки) идентификатор — point-delivery:
                                                                                                                  <select id="point-delivery" class="form-control">
                                                                                                                  
                                                                                                                  3. Написать скрипт:
                                                                                                                  <script>
                                                                                                                  // объект json (города и расстояния между ними)
                                                                                                                  var distance = {
                                                                                                                    "Москва":
                                                                                                                    { "Москва": 0,
                                                                                                                      "Санкт-Петербург": 2000,
                                                                                                                      "Чита": 4000,
                                                                                                                      "Владивосток": 6000},
                                                                                                                    "Санкт-Петербург":
                                                                                                                    { "Москва": 2000,
                                                                                                                      "Санкт-Петербург": 0,
                                                                                                                      "Чита": 5000,
                                                                                                                      "Владивосток": 7000},
                                                                                                                  };
                                                                                                                  $(function(){
                                                                                                                    $("#point-sending, #point-delivery").change(function() {
                                                                                                                      if (($("#point-sending").val()!="Выбрать город") && ($("#point-delivery").val()!="Выбрать город")) {
                                                                                                                        //вывести в консоль
                                                                                                                        console.log(distance[$("#point-sending").val()][$("#point-delivery").val()]);
                                                                                                                      }
                                                                                                                    });
                                                                                                                  });
                                                                                                                  </script>
                                                                                                                  
                                                                                                                  1. Борис # 0
                                                                                                                    Большое спасибо!
                                                                                                                    Пытаюсь разобраться.
                                                                                                                    1. Борис # 0
                                                                                                                      console.log(distance[$("#point-sending").val()][$("#point-delivery").val()]);
                                                                                                                      ругается на эту строчку, не могу разобраться?!
                                                                                                                      1. Борис # 0
                                                                                                                        calculator.js:11 Uncaught TypeError: Cannot read property 'Выбрать город' of undefined(anonymous function) @ calculator.js:11n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3
                                                                                                                        calculator.js:11 Uncaught TypeError: Cannot read property 'Москва' of undefined
                                                                                                                        1. Борис # 0
                                                                                                                          console.log(distance[$("#point-sending").val()] || [$("#point-delivery").val()]);
                                                                                                                          может быть не хватает или?
                                                                                                                          1. Александр Мальцев # 0
                                                                                                                            Скинул на JSFiddle по адресу https://jsfiddle.net/itchief/h6dyajhn/.
                                                                                                                            Не знаю что у Вас там не получается…
                                                                                                                            1. Борис # 0
                                                                                                                              Огромное спасибо!
                                                                                                                  2. Юрий Архипов # 0
                                                                                                                    Скажите, а как сделать модальное окно внутри другого модального окна? У меня есть сложная таблица с данными, я нажимаю на строку, открывается модальное окно (форма) где запись можно редактировать. Но у каждой записи в таблице есть много сложных полей, для редактирования которых было бы оптимально сделать дополнительные модальные окна. (Например у меня есть таблица контрактов, я нажимаю на контракт, открывается модальное окно с информацией по контракту, в окне показывается множество различных данных и, например, список агентов по контракту, и я могу добавлять новых агентов (а это нужно еще форму заполнить, которую я и хочу в новое модальное окно)
                                                                                                                    1. Александр Мальцев # 0
                                                                                                                      Необходимо создать 2 модальных окна. А потом из 1 окна вызывать 2.
                                                                                                                      <!-- Например, кнопка, открывающая 1 модальное окно -->
                                                                                                                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Открыть 1 модальное окно</button>
                                                                                                                      <!-- 1 Модальное окно -->
                                                                                                                      <div class="modal fade" id="myModal1" tabindex="-1">
                                                                                                                        <div class="modal-dialog">
                                                                                                                          <div class="modal-content">
                                                                                                                            <div class="modal-body">
                                                                                                                              <!-- Например, кнопка, открывающая 2 модальное окно -->
                                                                                                                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Открыть 2 модальное окно</button>
                                                                                                                              <!--...-->
                                                                                                                            </div>
                                                                                                                          </div>
                                                                                                                        </div>
                                                                                                                      </div>
                                                                                                                      <!-- 2 Модальное окно -->
                                                                                                                      <div class="modal fade" id="myModal2" tabindex="-1">
                                                                                                                        <!--...-->
                                                                                                                      </div>
                                                                                                                      
                                                                                                                      1. Юрий Архипов # 0
                                                                                                                        Спасибо, попробую! Меня смутил тот момент, что в документации Bootstrap, написано, что нельзя вызвать два перекрывающихся модальных окна.
                                                                                                                    2. Vasili # 0
                                                                                                                      Как можно определить в функции hidde.bs.modal какую кнопку нажали в модальном окне?
                                                                                                                      1. Александр Мальцев # 0
                                                                                                                        Никак.
                                                                                                                        Вам самостоятельно необходимо подписать нужные кнопки в модальном окне на событие click:
                                                                                                                        <!-- HTML-код модального окна-->
                                                                                                                        <div id="myModal" class="modal fade">
                                                                                                                          <div class="modal-dialog">
                                                                                                                            <div class="modal-content">
                                                                                                                              <div class="modal-header">
                                                                                                                                Заголовок модального окна
                                                                                                                              </div>
                                                                                                                              <div class="modal-body">
                                                                                                                                Содержимое модального окна...
                                                                                                                              </div>
                                                                                                                              <div class="modal-footer">
                                                                                                                                <button id="myButton1" type="button" class="btn btn-default" data-dismiss="modal">Закрыть 1</button>
                                                                                                                                <button id="myButton2" type="button" class="btn btn-default" data-dismiss="modal">Закрыть 2</button>
                                                                                                                              </div>
                                                                                                                            </div>
                                                                                                                          </div>
                                                                                                                        </div>
                                                                                                                        
                                                                                                                        <script>
                                                                                                                          $(function() {
                                                                                                                            //подпишем все кнопки button на событие click
                                                                                                                            $("button").click(function() {
                                                                                                                              //this - это кнопка на которую нажал пользователь
                                                                                                                              //например выведем в консоль её идентификатор 
                                                                                                                              console.log(this.id);
                                                                                                                            });
                                                                                                                          });
                                                                                                                        </script>
                                                                                                                        
                                                                                                                        1. Vasili # 0
                                                                                                                          Спасибо. Примерно так и сделали :)
                                                                                                                          Жаль, что в hide.bs.modal нельзя источник закрытия получить :(
                                                                                                                          В вашем коде не получиться подписка будет добавляться каждый раз, если несколько раз нажимать кнопку?
                                                                                                                      2. void_main() # 0
                                                                                                                        Добрый день! Столкнулся с такой проблемой — есть 2 модальных окна. Одно вызывается из другого. При обработке информации из второго окна данные ajax'ом передаются в первое окно где формируется список. В результате, если список большой, первое окно раздвигается по вертикали, на секунду появляется скролл для прокрутки окна и сразу исчезает. В итоге окно вылезает за пределы рабочей зоны и нет возможности его прокрутить вниз для доступа к кнопкам. Как это можно исправить? $('#modDialog').modal('handleUpdate') не помогает
                                                                                                                        //Функция вызывается по завершению обработки данных второго окна
                                                                                                                        function OnChangeSuccess(data, textStatus, jqXHR) { 
                                                                                                                                    //Закрываем второе окно          
                                                                                                                                    $('#modChangeRoles').modal('hide');
                                                                                                                                    //Выводим данные в первое окно
                                                                                                                                    $('#contentRoles').html(data);          
                                                                                                                                }
                                                                                                                        
                                                                                                                        1. Александр Мальцев # 0
                                                                                                                          Здравствуйте.
                                                                                                                          Когда в одном модальном окне Bootstrap открывается другое модальное окно есть проблема с классом .modal-open.
                                                                                                                          Т.е. при открытии модального окна, данный класс добавляется к body. А при закрытии убирается. Так вот когда закрывается второе модальное окно, данный класс удаляется. А он должен быть, т.к. остаётся ещё открытым первое модальное окно.
                                                                                                                          Попробуйте, добавить следующий скрипт, может быть поможет. Он при закрытии модального окна, проверяет количество открытых модальных окон и в случае положительного ответа, добавляет класс .modal-open к элементу body.
                                                                                                                          $(document).on('hidden.bs.modal', function(event) {
                                                                                                                            if($('.modal:visible').length) {
                                                                                                                              $('body').addClass('modal-open');
                                                                                                                            }
                                                                                                                          });
                                                                                                                          
                                                                                                                          1. void_main() # 0
                                                                                                                            Спасибо большое! Сработало
                                                                                                                        2. Александр # 0
                                                                                                                          Здравствуйте.
                                                                                                                          Не могу понять почему не отправляет форму в БД, раньше все было через шаблонизатор я уже сделал все в модальном окне и дальше не отправляет если можете помогите
                                                                                                                          Код
                                                                                                                          <?php
                                                                                                                          db (DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);
                                                                                                                          if(isset($_POST['add'])) {
                                                                                                                            $date = $_POST['date'];
                                                                                                                            $zamovnuki = clear_str($_POST['zamovnuki']);
                                                                                                                            $format = clear_str($_POST['format']);
                                                                                                                            $kilk = clear_str($_POST['kilkist']);
                                                                                                                            $file = clear_str($_POST['name_file']);
                                                                                                                            mysql_query(" INSERT INTO ".PREF."zamovlennya( date, zamovnuki, format, kilkist, name_file) VALUES ('$date', '$zamovnuki', '$format', '$kilk', '$file') ");
                                                                                                                            mysql_close();
                                                                                                                            echo "Замовлення Додано!";
                                                                                                                          }
                                                                                                                          ?>
                                                                                                                          <div class="modal fade" id="modal-1">
                                                                                                                            <div class="modal-dialog modal-md">
                                                                                                                              <div class="modal-content">
                                                                                                                                <div class="modal-header">
                                                                                                                                  <button class="close" type="button" data-dismiss="modal"><i class="fa fa-close"></i></button>
                                                                                                                                  <h4 class="modal-title text-center ">Форма замовлення</h4>
                                                                                                                                </div>
                                                                                                                                <div class="modal-body">
                                                                                                                                  <div class="margin-bottom">
                                                                                                                                    <form method='POST'>
                                                                                                                                      <input type="hidden" name="date" value="<?php echo date('Y-m-d');?>">
                                                                                                                                      <div class="input-group margin-bottom-sm">
                                                                                                                                        <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                                                                                                                                        <select name="zamovnuki" class="form-control form-r">
                                                                                                                                          <option value="0" selected="">&nbsp...</option>
                                                                                                                                          <? 
                                                                                                                                            db (DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);
                                                                                                                                            $result = mysql_query("SELECT * FROM ".PREF."zamovnuki");
                                                                                                                                            if (!$result) {
                                                                                                                                              echo 'Could not run query: ' . mysql_error();
                                                                                                                                              exit;
                                                                                                                                            }
                                                                                                                                            for ($i=0; $i<mysql_num_rows($result); $i++) {
                                                                                                                          		    $name = mysql_fetch_array($result);
                                                                                                                                              echo  "<option value=$name[id]>$name[name]</option>";
                                                                                                                                            }
                                                                                                                                            mysql_close();
                                                                                                                                          ?>
                                                                                                                                        </select>
                                                                                                                                      </div>
                                                                                                                                      
                                                                                                                                      <div class="input-group margin-bottom-sm">
                                                                                                                                        <span class="input-group-addon"><i class="fa fa-arrows-alt fa-fw"></i></span>
                                                                                                                                        <input class="form-control" type="text" placeholder="Формат" name="format">
                                                                                                                                      </div>
                                                                                                                                      
                                                                                                                                      <div class="input-group margin-bottom-sm">
                                                                                                                                        <span class="input-group-addon"><i class="fa fa-calculator fa-fw"></i></span>
                                                                                                                                        <input class="form-control" type="text" placeholder="Кількість" name="kilkist">
                                                                                                                                      </div>
                                                                                                                                      
                                                                                                                                      <div class="input-group margin-bottom-sm">
                                                                                                                                        <span class="input-group-addon"><i class="fa fa-file-pdf-o fa-fw"></i></span>
                                                                                                                                        <input class="form-control" type="text" placeholder="Назва файла" name="name_file">
                                                                                                                                      </div>
                                                                                                                                    </div>
                                                                                                                                  </div>
                                                                                                                                  <div class="modal-footer ">
                                                                                                                                    <button class="btn btn-success btn-sm" type="submit" data-dismiss="modal" id="btn-on" name="add"><i class="fa fa-check"></i>   Добавити</button>
                                                                                                                                    <button class="btn btn-danger btn-sm" type="button" data-dismiss="modal" id="btn-on">Закрити</button>
                                                                                                                                  </div>
                                                                                                                                </form>
                                                                                                                              </div>
                                                                                                                            </div>
                                                                                                                          </div>
                                                                                                                          
                                                                                                                          1. Александр Мальцев # 0
                                                                                                                            Здравствуйте.
                                                                                                                            1. Необходимо убрать атрибут data-dismiss со значением modal у кнопки Добавить.
                                                                                                                            2. Добавить к форме атрибут action. Т.к. у Вас данные должны куда-то отправляться. Если на туже страницу, то:
                                                                                                                            <form action="<?=$_SERVER['PHP_SELF']?>" method="post">
                                                                                                                            
                                                                                                                            Или если через AJAX, то необходимо написать сценарий.
                                                                                                                            3. Добавить exit после echo «Замовлення Додано!»;
                                                                                                                            echo "Замовлення Додано!";
                                                                                                                            exit;
                                                                                                                            
                                                                                                                            1. Александр # 0
                                                                                                                              Спасибо помогло! но типерь echo «Замовлення Додано!»; както странно работает
                                                                                                                              Ищо вапрост как зделать чтоб echo «Замовлення Додано!»; выводилось ... и пропадало через 3с? через AJAX или если есть пример как зделать
                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                Конечно лучше организовать через AJAX. Как это сделать можно например посмотреть в этой статье.

                                                                                                                                Для того чтобы некоторый элемент с текстом пропадал, достаточно использовать функцию JavaScript setTimeout() после получения ответа через AJAX.
                                                                                                                          2. Sergey # 0
                                                                                                                            Подскажите пожалуйста, как сделать что бы окно не появлялось после закрытия при переходе на другою страницу сайта.
                                                                                                                            1. Александр Мальцев # 0
                                                                                                                              Использовать localStorage. Например, после закрытия модального окна сохранить в LocalStorage некоторое значение, а потом при открытии страницы сайта считать его. Далее в зависимости от считанного значения определить, надо открывать модальное окно или нет.
                                                                                                                            2. Евгений # 0
                                                                                                                              как вызвать модальное окно из другого файла?
                                                                                                                              1. Евгений # 0
                                                                                                                                или с подгрузкой из внешнего файла
                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                  Посмотрите эти ветки комментариев:
                                                                                                                                  Комментарий #629
                                                                                                                                  Комментарий #622
                                                                                                                                  Для загрузки содержимого файла обычно используется метод jQuery load().
                                                                                                                              2. Евгений # 0
                                                                                                                                ну помогите же, определенный контент на свою ссылку или кнопку, как этого добиться?
                                                                                                                                Код
                                                                                                                                <div class="ajax" style="position: relative; overflow: hidden">
                                                                                                                                	<div class="text-center">
                                                                                                                                		<button class="demo btn btn-primary" data-toggle="modal">Вход</button>
                                                                                                                                		<button class="demo btn btn-primary" data-toggle="modal">Регистрация</button>
                                                                                                                                		<button class="demo btn btn-primary" data-toggle="modal">Востановление пароля</button>
                                                                                                                                	</div>
                                                                                                                                </div>
                                                                                                                                <div id="ajax-modal" class="modal fade" tabindex="-1" style="display: none;">
                                                                                                                                	<div class="modal-dialog modal-sm"></div>
                                                                                                                                </div>
                                                                                                                                
                                                                                                                                <script id="ajax" type="text/javascript">
                                                                                                                                var $modal = $('#ajax-modal');
                                                                                                                                
                                                                                                                                $('.ajax .demo').on('click', function(){
                                                                                                                                  // create the backdrop and wait for next modal to be triggered
                                                                                                                                  $('body').modalmanager('loading');
                                                                                                                                
                                                                                                                                  setTimeout(function(){
                                                                                                                                     $modal.load('test.php', '', function(){
                                                                                                                                      $modal.modal();
                                                                                                                                    });
                                                                                                                                  }, 1000);
                                                                                                                                });
                                                                                                                                
                                                                                                                                $modal.on('click', '.update', function(){
                                                                                                                                  $modal.modal('loading');
                                                                                                                                  setTimeout(function(){
                                                                                                                                    $modal
                                                                                                                                      .modal('loading')
                                                                                                                                      .find('.modal-body')
                                                                                                                                        .prepend('<div class="alert alert-info fade in">' +
                                                                                                                                          'Updated!<button type="button" class="close" data-dismiss="alert">×</button>' +
                                                                                                                                        '</div>');
                                                                                                                                  }, 1000);
                                                                                                                                });
                                                                                                                                
                                                                                                                                </script>
                                                                                                                                
                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                  В Bootstrap начиная с версии 3.3.0 параметр remote был убран. Вместо него рекомендуется использовать jQuery метод load() или другой jQuery AJAX метод (если нужно что-то более сложное).
                                                                                                                                  Это делается за 4 шага:
                                                                                                                                  1. Кнопки (уже есть)
                                                                                                                                  <!-- Кнопки -->
                                                                                                                                  <div class="ajax text-center">
                                                                                                                                    <button id="authorization" class="btn btn-primary" data-toggle="modal">Вход</button>
                                                                                                                                    <button id="registration" class="btn btn-primary" data-toggle="modal">Регистрация</button>
                                                                                                                                    <button id="restorePassword" class="btn btn-primary" data-toggle="modal">Восстановление пароля</button>
                                                                                                                                  </div>
                                                                                                                                  

                                                                                                                                  2. Заготовка (модальное окно):
                                                                                                                                  <!-- Заготовка (модальное окно) --> 
                                                                                                                                  <div id="ajax-modal" class="modal fade" tabindex="-1">
                                                                                                                                    <div class="modal-dialog">
                                                                                                                                      <div class="modal-content">
                                                                                                                                      </div>
                                                                                                                                    </div>
                                                                                                                                  </div>
                                                                                                                                  

                                                                                                                                  3. Скрипт JavaScript:
                                                                                                                                  $('#authorization,#registration,#restorePassword').click(function(){
                                                                                                                                    var $modal =  $('#ajax-modal');
                                                                                                                                    $modal.find('.modal-content').load(this.id+'.tpl', function() {
                                                                                                                                      $modal.modal('show');
                                                                                                                                    });
                                                                                                                                  });
                                                                                                                                  

                                                                                                                                  4. Ну и собственно шаблоны (файлы):
                                                                                                                                  authorization.tpl
                                                                                                                                  restorePassword.tpl
                                                                                                                                  registration.tpl

                                                                                                                                  Вот ссылка
                                                                                                                                  _https://drive.google.com/file/d/0ByDpJh5AcnQIMkgtRC1FYjRSaGs/view?usp=sharing

                                                                                                                                  Не совсем понятно зачем Вы используете setTimeout, т.к. обработка ajax запроса даже на бесплатном хостинге не превышает 200 мс. Анимация модального окна и то длится дольше (400 мс).
                                                                                                                                  1. Евгений # 0
                                                                                                                                    вы меня уж простите за настойчивость. не могли бы вы мне еще подсказать, допустим открываю окно с входом, в ней есть ссылочка, забыл пароль, при нажатии на нее открыть окно с содержащий востановлением пароля а с входом закрыть.
                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                      За что Вы просите прощения, пишите и задавайте вопросы. Тем более что Ваши вопросы довольно интересные. Не совсем был понятен вопрос от 1 февраля, поэтому не знал что ответить.
                                                                                                                                      Принцип здесь будет такой:
                                                                                                                                      Вешаем обработчик события click на кнопку, открывающую другое (2) модальное окно. В обработчике прописываем следующие действия:
                                                                                                                                      1. Закрыть 1 модальное окно
                                                                                                                                      2. Повесить обработчик на закрытие, который будет открывать 2 модальное окно. Т.е. когда 1 окно будет полностью скрыто, откроется 2 модальное окно.
                                                                                                                                      Код HTML + JavaScript
                                                                                                                                      <!-- Кнопка, открывающая 1 модальное окно -->
                                                                                                                                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Открыть 1 модальное окно</button>
                                                                                                                                      
                                                                                                                                      <!-- Модальное окно 1 -->
                                                                                                                                      <div class="modal fade" id="myModal1" tabindex="-1">
                                                                                                                                        <div class="modal-dialog">
                                                                                                                                          <div class="modal-content">
                                                                                                                                            <div class="modal-header">
                                                                                                                                              <button type="button" class="close" data-dismiss="modal">×</button>
                                                                                                                                              <h4 class="modal-title">Заголовок 1 модального окна</h4>
                                                                                                                                            </div>
                                                                                                                                            <div class="modal-body">
                                                                                                                                              Содержимое 1 модального окна...
                                                                                                                                            </div>
                                                                                                                                            <div class="modal-footer">
                                                                                                                                              <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                                                                                                                              <button type="button" class="btn btn-primary">Сохранить изменения</button>
                                                                                                                                              <!-- Кнопка, открывающая 2 модальное окно -->
                                                                                                                                              <button id="btn2" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Открыть 2 модальное окно</button>
                                                                                                                                            </div>
                                                                                                                                          </div>
                                                                                                                                        </div>
                                                                                                                                      </div>
                                                                                                                                      
                                                                                                                                      <!-- Модальное окно 2 -->
                                                                                                                                      <div class="modal fade" id="myModal2" tabindex="-1">
                                                                                                                                        <div class="modal-dialog">
                                                                                                                                          <div class="modal-content">
                                                                                                                                            <div class="modal-header">
                                                                                                                                              <button type="button" class="close" data-dismiss="modal">×</button>
                                                                                                                                              <h4 class="modal-title">Заголовок 2 модального окна</h4>
                                                                                                                                            </div>
                                                                                                                                            <div class="modal-body">
                                                                                                                                              Содержимое 2 модального окна...
                                                                                                                                            </div>
                                                                                                                                            <div class="modal-footer">
                                                                                                                                              <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                                                                                                                              <button type="button" class="btn btn-primary">Сохранить изменения</button>
                                                                                                                                            </div>
                                                                                                                                          </div>
                                                                                                                                        </div>
                                                                                                                                      </div>
                                                                                                                                      
                                                                                                                                      <script>
                                                                                                                                      $(function() {
                                                                                                                                        $('#btn2').click(function(e) {
                                                                                                                                          e.preventDefault();
                                                                                                                                          $('#myModal1')
                                                                                                                                            .modal('hide')
                                                                                                                                            .on('hidden.bs.modal', function (e) {
                                                                                                                                              $('#myModal2').modal('show');
                                                                                                                                              $(this).off('hidden.bs.modal');
                                                                                                                                            });
                                                                                                                                        });
                                                                                                                                      });
                                                                                                                                      </script>
                                                                                                                                      
                                                                                                                                2. Евгений # 0
                                                                                                                                  спасибо большое выручили!
                                                                                                                                  1. Сергей # 0
                                                                                                                                    Здравствуйте. Проблема в следующем: есть полностью рабочее модальное окно в котором присутствует ссылка на id блока контакты. Контакты расположены внизу страницы под своим id. При нажатии страница прокручивается на контакты, а модаль не закрывается. data-dismiss=«modal» просто закрыло модаль без перехода на контакты.
                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                      Здравствуйте, Сергей.
                                                                                                                                      Вам необходимо сделать следующее:
                                                                                                                                      1. Добавить к ссылке какой-нибудь идентификатор (например, link)
                                                                                                                                      2. Написать скрипт:
                                                                                                                                      Код JavaScript
                                                                                                                                      <script>
                                                                                                                                      $(function() {
                                                                                                                                        // при нажатию на ссылку
                                                                                                                                        $('#link').click(function(){
                                                                                                                                          //закрыть модальное окно (myModal - id формы)
                                                                                                                                          $('#myModal').modal('hide');
                                                                                                                                        });
                                                                                                                                      });
                                                                                                                                      </script>
                                                                                                                                      1. Сергей # 0
                                                                                                                                        На счет индификатора по подробнее. Где и каким образом его ставить?
                                                                                                                                        1. Александр Мальцев # 0
                                                                                                                                          Куда уже подробнее )
                                                                                                                                          Идентификатор — это id.
                                                                                                                                          <a id="link" href="#">Название ссылки</a>
                                                                                                                                          
                                                                                                                                          1. Сергей # 0
                                                                                                                                            Не корректно работает. Вызываю модальное окно на блоке «А», кликаю на ссылку «купить» (с id указаным для закрытия модалки, ваш скрипт прописан), на секунду кидает на блок «Контакты» и после закрытия кидает на блок «А».
                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                              Не знаю, что у Вас там не получается.
                                                                                                                                              Вот Ваш пример на _https://jsfiddle.net/itchief/3uzfxpud/
                                                                                                                                              Попробуйте ещё так (js)
                                                                                                                                              $('#link').click(function(e){
                                                                                                                                                e.preventDefault();
                                                                                                                                                $('#myModal').modal('hide');
                                                                                                                                                location.href=$(this).attr('href');
                                                                                                                                              });
                                                                                                                                              
                                                                                                                                              1. Максим # 0
                                                                                                                                                Добрый день, а обратный вариант: кликнуть по ссылке, открыть модальное окно и прокрутить до id или name?
                                                                                                                                                1. Максим # 0
                                                                                                                                                  Нашел скрипт такого типа
                                                                                                                                                  $('#modal').on('shown', function () {
                                                                                                                                                      $("#modal-content").scrollTop(0);
                                                                                                                                                  });
                                                                                                                                                  Но прикрутить не получилось (((
                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                    Посмотри ответ в этом комментарии.
                                                                                                                                    2. Александр # 0
                                                                                                                                      Здрвствуйте.
                                                                                                                                      А как сделать, чтобы модальное окно выезжало до центра рабочей области окна браузера, а не останавливалось в верхней части.
                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                        Здравствуйте.
                                                                                                                                        В CSS это меняется посредством изменения margin:
                                                                                                                                        @media (min-width: 768px)
                                                                                                                                        .modal-dialog {
                                                                                                                                          width: 600px;
                                                                                                                                          margin: 90px auto; /* Сверху и снизу по 90px */
                                                                                                                                        }
                                                                                                                                        .modal-dialog {
                                                                                                                                          position: relative;
                                                                                                                                          width: auto;
                                                                                                                                          margin: 10px; /* Со всех сторон по 10px (на мобильных устройствах) */
                                                                                                                                        }
                                                                                                                                        
                                                                                                                                        Если Вам необходимо точное центрирование, то необходимо воспользоваться JavaScript:
                                                                                                                                        $('#myModal').on('shown.bs.modal', function (e) {
                                                                                                                                          $('.modal-dialog').css('margin-top',($(window).height()-$('.modal-dialog').height())/2);
                                                                                                                                        });
                                                                                                                                        
                                                                                                                                        1. Александр # 0
                                                                                                                                          Благодарю, JavaScript — идеальный вариант, вот только из значения margin-top надо еще вычесть половину высоты самого модального окна, а-то по центру рабочей области его верхняя граница. подскажете как это будет выглядеть?
                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                            А но и так вычитается: $('.modal-dialog').height().
                                                                                                                                            Попробуйте сделать так.
                                                                                                                                            Код JavaScript
                                                                                                                                            $(function(){
                                                                                                                                              //myModal - id модального окна
                                                                                                                                              $('#myModal').on('shown.bs.modal', function (e) {
                                                                                                                                                $(this).find('.modal-dialog').css('margin-top',($(window).height()-$(this).find('.modal-dialog').height())/2);
                                                                                                                                              });
                                                                                                                                            });
                                                                                                                                            
                                                                                                                                            1. Александр # 0
                                                                                                                                              Отлично.
                                                                                                                                              Вот этот вариант точно по центру открывает.
                                                                                                                                              Благодарю.
                                                                                                                                      2. Александр # 0
                                                                                                                                        Еще вопрос.
                                                                                                                                        Есть вероятность, что он немного не в этот раздел, а в формы, но возник в связи с отображением select-а именно в модальном окне.

                                                                                                                                        Есть обычного размера (как в примерах) открытое модальное окно
                                                                                                                                        в нем форма с select-ом:
                                                                                                                                        <select class="form-control input-sm">
                                                                                                                                        	<option value="1">Здесь идет очень длинное наименование пункта, из-за которого выпадающий список не только выползает за ширину select-а, но и вообще за границы модального окна вправо и получается уродец</option>
                                                                                                                                        	<option value="2">коротенький пункт</option>
                                                                                                                                        	<option value="3">коротенький пункт</option>
                                                                                                                                        
                                                                                                                                        	<option value="n">коротенький пункт</option>
                                                                                                                                        </select>
                                                                                                                                        
                                                                                                                                        Можно как-то побороть вот это выползание вправо за пределы selecta
                                                                                                                                        1. Александр Мальцев # 0
                                                                                                                                          Это стандартное и правильное поведение браузера. Он не может в раскрывающем списке обрезать Вам опцию. Он должен предоставить пользователю полное её содержимое. Раньше в старых браузерах был такой глюк, т.е. ширина выпадающего списка равнялась ширине элемента select. Но потом это убрали.
                                                                                                                                          А с чем Вы хотите бороться?
                                                                                                                                          Наилучший вариант — это сделать пункт таким же коротким, как и другие. Можно конечно поступить жестоко и его обрезать. Но тогда как пользователь узнает что он выбрал. Если Вам это нужно напишите, сделаю)
                                                                                                                                          Другой хороший вариант, если Вам всё таки нужны длинные тексты — это использовать, например, компонент dropdown. Он позволяет создавать многострочные выпадающие списки. Т.е. когда один пункт, если он не влазиет, переносится на другую строчку.
                                                                                                                                          1. Александр # 0
                                                                                                                                            Dropdown, конечно хорош, но не совсем удобен и корректен в качестве замены select -а, т.к. усложнит обработку поля формы.

                                                                                                                                            Может есть под bootstrap стилизация select-ов типа вот такого компонента?
                                                                                                                                            А-то этот не очень с dootstrap-ом дружит. Работает, конечно, но ведет себя не предсказуемо.
                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                              А какие неудобства предоставляет jQuery-Selectric? В чём заключается его непредсказуемость. Подключил, работает. Кроме этого имеет очень удобную панель для настройки CSS под дизайн сайта.
                                                                                                                                              Есть ещё такой компонент: Bootstrap MultiSelect
                                                                                                                                              Github: _https://github.com/davidstutz/bootstrap-multiselect
                                                                                                                                              Пример: _http://jsfiddle.net/itchief/rpv1m7wx/
                                                                                                                                              Ещё один компонент:
                                                                                                                                              _https://silviomoreto.github.io/bootstrap-select/
                                                                                                                                              1. Алексанр # 0
                                                                                                                                                Непредсказуемость у него очень странная.
                                                                                                                                                Где-то работает хорошо, где-то скачер по странице при открытии списка,
                                                                                                                                                Где-то, — как будто вообще его не было.
                                                                                                                                                Например у меня при вот такой разметке
                                                                                                                                                <center>
                                                                                                                                                <table width=""60%>
                                                                                                                                                	<tr>
                                                                                                                                                		<td width="30%">Выберите</td>
                                                                                                                                                		<td align="left">
                                                                                                                                                			<select>
                                                                                                                                                				.............................................	
                                                                                                                                                			</select>
                                                                                                                                                		</td>
                                                                                                                                                	</tr>
                                                                                                                                                </table>
                                                                                                                                                </center>
                                                                                                                                                
                                                                                                                                                Скачет влево при открытии списка.
                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                  Это скорее из-за того, что Вы его помещаете в таблицу.
                                                                                                                                                  Вы смотрели, как работает этот элемент? Ни какой компонент, не стили, не JavaScript не смогут расширить Вам элемент select до такой степени. Поведение этого элемента определяется стандартом HTML и соответственно браузером. Этот компонент (jQuery Selectric) когда Вы его инициализируете для select, скрывает его (т.е. настоящий) и подсовывает Вам его копию, выполнению с помощью элементов div, ul, li, стилей CSS и JavaScript. И вы на самом деле работаете не с этим элементом (select), а с его копией. А когда Вы его помещаете в таблицу, он не может вести себя не так… Так как таблицы имеют свою специфику в HTML (другое отображение).

                                                                                                                                                  Тоже самое Вы могли бы сделать с dropdown, т.е. скрыть элемент select, а вместо него подсунуть dropdown. А потом связать логику работы dropdown с компонентом select.
                                                                                                                                                  1. Александр # 0
                                                                                                                                                    Да, я в курсе, что он подменяет select.
                                                                                                                                                    Суть в том что если убрать центровку таблицы, — то скакать перестает. Не критично в принципе.
                                                                                                                                        2. Александр # 0
                                                                                                                                          И еще вопрос по изменению размеров модальных окон
                                                                                                                                          Есть-ли какая-то возможность явно указать требуемую ширину модального окна, например 80% ширины рабочей области окна браузера?
                                                                                                                                          Допустим на странице есть 15-20 модальных окон, каждое из которых открывается при щелчке по соответствующему пункту (обращение идет по id окна).
                                                                                                                                          Соответственно если я правильно понял из примера ширина окна, выставляется именно этим самым id
                                                                                                                                          <div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
                                                                                                                                          следовательно, возникает вопрос, как показывать именно нужное широкое окно.
                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                            Вы немного не правильно поняли. Ширина модального окна устанавливается с помощью классов modal-sm или modal-lg, один из которых необходимо добавить к классу modal-dialog.
                                                                                                                                            Если Вам необходимо установить свою ширину некоторому окну, то в CSS это будет выглядеть следующим образом:
                                                                                                                                            /* largeModal - id окна, которому необходимо установить щирину */
                                                                                                                                            #largeModal .modal-dialog {
                                                                                                                                              width: 80%;
                                                                                                                                            }
                                                                                                                                            1. Александр # 0
                                                                                                                                              Понял спасибо.
                                                                                                                                          2. Александр # 0
                                                                                                                                            И еще.
                                                                                                                                            После открытия и закрытия модального окна вокруг кнопки/ссылки появляется синяя рамочка
                                                                                                                                            Можно ее как-то убрать?
                                                                                                                                            1. Александр Мальцев # +1
                                                                                                                                              Синяя рамочка означает то, что кнопка находится в фокусе.
                                                                                                                                              Что её убрать, необходимо найти данную кнопку и при получении ей фокуса, его убрать.
                                                                                                                                              Код JavaScript:
                                                                                                                                              $(function() {
                                                                                                                                                // кнопка с атрибутом data-target="myModal"
                                                                                                                                                $('[data-target="#myModal"]').focus(function () {
                                                                                                                                                  $(this).blur();
                                                                                                                                                });
                                                                                                                                              });
                                                                                                                                              
                                                                                                                                              1. Александр # 0
                                                                                                                                                Отлично, Благодарю.
                                                                                                                                            2. Александр # 0
                                                                                                                                              Александр, приветствую.

                                                                                                                                              Появился у меня «затык» с открытием модальных окон, а где собака порылась — понять не могу.

                                                                                                                                              В одном и том же месте какие-то окна показываются, какие-то не показываются

                                                                                                                                              Сможете-ли вы посмотреть через TeamViewer в чем проблема?
                                                                                                                                              1. Александр # 0
                                                                                                                                                Или могу выслать архив на электронку, как вам удобнее.
                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                  Лучше конечно на jsFiddle, но если не получится отправь по email.
                                                                                                                                                  1. Александр # 0
                                                                                                                                                    Отправил на admin@itchief.ru
                                                                                                                                                    1. Александр # 0
                                                                                                                                                      Вопрос решился. Вопрос снят.
                                                                                                                                              2. Дмитрий # 0
                                                                                                                                                Здравствуйте. Как вынести бутстрап modal за пределы родителей (через js).
                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                  Здравствуйте.
                                                                                                                                                  Этот момент описывается в разделе «Особенности компонента Modal». Там говорится, что HTML-код модального окна желательно размещать сразу после открывающего тега body.
                                                                                                                                                  1. Дмитрий # 0
                                                                                                                                                    Здравствуйте, я это понимаю, но в системе на которой находится сайт, форма быстрого заказа, так устроена, что она находится везде внутри блока товара и стандартно не вынести за пределы, меня интересует, возможно ли вынести посредствам js модал после открывающего тега body
                                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                                      После загрузки необходимо написать скрипт, который переместит все модальные окна сразу же после открывающего тега body.
                                                                                                                                                      <script>
                                                                                                                                                      $(function(){
                                                                                                                                                        $('div.fade').each(function(){
                                                                                                                                                          $(this).prependTo("body");
                                                                                                                                                        });
                                                                                                                                                      });
                                                                                                                                                      </script>
                                                                                                                                                      
                                                                                                                                                      1. Дмитрий # 0
                                                                                                                                                        Александр, спасибо огромнейшее, помогло!
                                                                                                                                                        1. Тарас # 0
                                                                                                                                                          Низкий поклон! Решилась проблема
                                                                                                                                                  2. larisa # 0
                                                                                                                                                    здравствуйте!
                                                                                                                                                    подскажите, пожалуйста, как сделать, чтобы модальное окно закрывалось при нажатии на
                                                                                                                                                    <button type="submit" class="btn">Выслать новый пароль</button>
                                                                                                                                                    и «submit» при этом срабатывал?
                                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                                      Здравствуйте.
                                                                                                                                                      Напишите скрипт:
                                                                                                                                                      $(function(){
                                                                                                                                                        //#myBtn - id кнопки
                                                                                                                                                        $('#myBtn').click(function(){
                                                                                                                                                          //#myForm - id формы
                                                                                                                                                          $('#myForm').submit();
                                                                                                                                                        });
                                                                                                                                                      });
                                                                                                                                                      
                                                                                                                                                      Кнопка:
                                                                                                                                                      <button id="myBtn" type="submit" class="btn">Выслать новый пароль</button>
                                                                                                                                                      
                                                                                                                                                      Форма:
                                                                                                                                                      <form id="myForm">
                                                                                                                                                        ...
                                                                                                                                                      </form>
                                                                                                                                                      
                                                                                                                                                    2. Александр # 0
                                                                                                                                                      Александр, день добрый.
                                                                                                                                                      Есть вот такая разметка.
                                                                                                                                                      Код разметки
                                                                                                                                                      <table>
                                                                                                                                                      	<tr>
                                                                                                                                                      		<td style="cursor:pointer;padding:5px 30px 5px 30px;border-left:1px dotted;border-right:1px dotted;" onclick="ModalOpen(1)">
                                                                                                                                                      				<style>
                                                                                                                                                                          #1 .modal-dialog {
                                                                                                                                                                              width: 50%;
                                                                                                                                                                          }
                                                                                                                                                                      </style>
                                                                                                                                                                      <div id="1" class="modal fade" tabindex="-1">
                                                                                                                                                                        <div class="modal-dialog">
                                                                                                                                                                          <div class="modal-content">
                                                                                                                                                                            <div class="modal-header">
                                                                                                                                                                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Х</button>
                                                                                                                                                                              <h4 class="modal-title"><center>Добавление раздела</center></h4>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div class="modal-body">
                                                                                                                                                      						<h4>Див с ID = 1</h4>
                                                                                                                                                      					  </div>
                                                                                                                                                                          </div>
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                      				Див с ID = 1
                                                                                                                                                      		</td>
                                                                                                                                                      		<td style="cursor:pointer;padding:5px 30px 5px 30px;border-left:1px dotted;border-right:1px dotted;" onclick="ModalOpen(2)">
                                                                                                                                                      				<style>
                                                                                                                                                                          #2 .modal-dialog {
                                                                                                                                                                              width: 50%;
                                                                                                                                                                          }
                                                                                                                                                                      </style>
                                                                                                                                                                      <div id="2" class="modal fade" tabindex="-1">
                                                                                                                                                                        <div class="modal-dialog">
                                                                                                                                                                          <div class="modal-content">
                                                                                                                                                                            <div class="modal-header">
                                                                                                                                                                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Х</button>
                                                                                                                                                                              <h4 class="modal-title"><center>Добавление раздела</center></h4>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div class="modal-body">
                                                                                                                                                      						<h4>Див с ID = 2</h4>
                                                                                                                                                      					  </div>
                                                                                                                                                                          </div>
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                      				Див с ID = 2
                                                                                                                                                      		</td>
                                                                                                                                                      		<td style="cursor:pointer;padding:5px 30px 5px 30px;border-left:1px dotted;border-right:1px dotted;" onclick="ModalOpen(3)">
                                                                                                                                                      				<style>
                                                                                                                                                                          #3 .modal-dialog {
                                                                                                                                                                              width: 50%;
                                                                                                                                                                          }
                                                                                                                                                                      </style>
                                                                                                                                                                      <div id="3" class="modal fade" tabindex="-1">
                                                                                                                                                                        <div class="modal-dialog">
                                                                                                                                                                          <div class="modal-content">
                                                                                                                                                                            <div class="modal-header">
                                                                                                                                                                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Х</button>
                                                                                                                                                                              <h4 class="modal-title"><center>Добавление раздела</center></h4>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div class="modal-body">
                                                                                                                                                      						<h4>Див с ID = 3</h4>
                                                                                                                                                      					  </div>
                                                                                                                                                                          </div>
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                      				Див с ID = 3
                                                                                                                                                      		</td>
                                                                                                                                                      		<td style="cursor:pointer;padding:5px 30px 5px 30px;border-left:1px dotted;border-right:1px dotted;" onclick="ModalOpen(4)">
                                                                                                                                                      				<style>
                                                                                                                                                                          #4 .modal-dialog {
                                                                                                                                                                              width: 50%;
                                                                                                                                                                          }
                                                                                                                                                                      </style>
                                                                                                                                                                      <div id="4" class="modal fade" tabindex="-1">
                                                                                                                                                                        <div class="modal-dialog">
                                                                                                                                                                          <div class="modal-content">
                                                                                                                                                                            <div class="modal-header">
                                                                                                                                                                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Х</button>
                                                                                                                                                                              <h4 class="modal-title"><center>Добавление раздела</center></h4>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div class="modal-body">
                                                                                                                                                      						<h4>Див с ID = 4</h4>
                                                                                                                                                      					  </div>
                                                                                                                                                                          </div>
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                      				Див с ID = 4
                                                                                                                                                      		</td>
                                                                                                                                                      ...
                                                                                                                                                      		<td style="cursor:pointer;padding:5px 30px 5px 30px;border-left:1px dotted;border-right:1px dotted;" onclick="ModalOpen(n)">
                                                                                                                                                      				<style>
                                                                                                                                                                          #n .modal-dialog {
                                                                                                                                                                              width: 50%;
                                                                                                                                                                          }
                                                                                                                                                                      </style>
                                                                                                                                                                      <div id="n" class="modal fade" tabindex="-1">
                                                                                                                                                                        <div class="modal-dialog">
                                                                                                                                                                          <div class="modal-content">
                                                                                                                                                                            <div class="modal-header">
                                                                                                                                                                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Х</button>
                                                                                                                                                                              <h4 class="modal-title"><center>Добавление раздела</center></h4>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div class="modal-body">
                                                                                                                                                      						<h4>Див с ID = n</h4>
                                                                                                                                                      					  </div>
                                                                                                                                                                          </div>
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                      				Див с ID = n
                                                                                                                                                      		</td>
                                                                                                                                                      	</tr>	
                                                                                                                                                      <table>
                                                                                                                                                      

                                                                                                                                                      подскажите, как должна выглядеть функция ModalOpen чтобы корректно открывать соответствующее модальное окно при клике по td?
                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                        Здравствуйте, Александр.
                                                                                                                                                        Почему обращаетесь именно ко мне :)
                                                                                                                                                        Сайт посещают довольно большое количество пользователей. Может и предложенных решений будет больше.
                                                                                                                                                        Создавать такую разметку не стоит, т.к. Вы смешиваете HTML и CSS и JavaScript. Потом впоследствии просто не разберётесь…
                                                                                                                                                        Даже если написать функцию Ваш код не будет работать должен образом.
                                                                                                                                                        Функция будет выглядеть следующим образом:
                                                                                                                                                        function ModalOpen(idModal) {
                                                                                                                                                          $('#'+idModal).modal('show');
                                                                                                                                                        }
                                                                                                                                                        
                                                                                                                                                        Это связано с тем, что у событий JavaScript есть всплытие, и, например, при нажатии на закрытие модального окна, Вы опять тем самым вызовите модальное окно. Это происходит из-за того что после нажатия кнопки закрыть, событие клик начинает всплывать и доходит до td и опять вызывает модальное окно. Вот так… А запретить всплытие, как Вы написали событие клик, невозможно.
                                                                                                                                                        Единственный выход перенести все модальные окна сразу после открывающего тега body. Это не только правильно, но и Ваш код будет работать.
                                                                                                                                                        1. Александр # 0
                                                                                                                                                          Благодарю.
                                                                                                                                                          Да вижу, что работает не совсем корректно.
                                                                                                                                                          Вынести все модальные окна под открывающий тег bоdy — не реально, т.к. контент генерируется динамически vbs-ом вынос модальных окон в начало документа — усложнит код минимум вдвое.

                                                                                                                                                          По данному примеру, как оказалось, достаточно вынести CSS и DIV с модальным окном выше открывающего td и все нормально заработало.
                                                                                                                                                      2. Максим # 0
                                                                                                                                                        Здравствуйте, а как реализовать такой вариант кликнуть по ссылке, открыть модальное окно и прокрутить до id или name в середине окна?
                                                                                                                                                        побывал что-то вроде такого:
                                                                                                                                                        $('#myModal').on('shown.bs.modal', function () {
                                                                                                                                                          $('#myInput').scrollTop(0);
                                                                                                                                                        })
                                                                                                                                                        Но прикрутить не получилось, открывает модальное окно и скроллит его до заголовка, может это фишка такая, по любому плавно прокрутить до заголовка.
                                                                                                                                                        1. Александр Мальцев # 0
                                                                                                                                                          Здравствуйте, это можно выполнить так:
                                                                                                                                                          $('#myModal').on('shown.bs.modal', function () {
                                                                                                                                                            $(this).scrollTop($('#myInput').offset().top);
                                                                                                                                                          });
                                                                                                                                                          
                                                                                                                                                          Но лучше так (с анимацией):
                                                                                                                                                          $('#myModal').on('shown.bs.modal', function () {
                                                                                                                                                            $(this).animate({scrollTop:$('#myInput').offset().top},500);
                                                                                                                                                          });
                                                                                                                                                          
                                                                                                                                                          1. Максим # 0
                                                                                                                                                            Александр, Спасибо!
                                                                                                                                                            А как можно составить и вычислить скролл по такой формуле:
                                                                                                                                                            $('#myInput').offset().top — (Высота всей страницы — высота окна)
                                                                                                                                                            Когда страница без скролла скрипт отрабатывает отлично, но как только появляется скролл на странице, в модальном окне идет смещение и myInput улетает вверх, предполагаю на разницу высоты…
                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                              Попробуй тогда вместо offset использовать position:
                                                                                                                                                              $('#myModal').on('shown.bs.modal', function () {
                                                                                                                                                                $(this).scrollTop($('#myInput').position().top);
                                                                                                                                                              });
                                                                                                                                                              
                                                                                                                                                        2. Эрик Галин # 0
                                                                                                                                                          Три вопроса
                                                                                                                                                          1)на странице index.html 13 модальных окон в каждом должно быть youtube с ?rel=0&autoplay=1 автостартом, они все при загрузке index.html начинают петь
                                                                                                                                                          <iframe width="560" height="315" src="https://www.youtube.com/embed/J8kLJttteJw?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
                                                                                                                                                          
                                                                                                                                                          2) Нужно что бы каждое модальное окно было в новом файле myModal.html, myModal2.html и т.д.

                                                                                                                                                          Было авто закрытие видео а ту у меня огромный повторяющийся код.
                                                                                                                                                          <!-- Кнопка, вызывающее модальное окно -->
                                                                                                                                                          <a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>  
                                                                                                                                                          <!-- HTML-код модального окна -->
                                                                                                                                                          <div id="myModal" class="modal fade">
                                                                                                                                                            <div class="modal-dialog">
                                                                                                                                                              <div class="modal-content">
                                                                                                                                                                <!-- Заголовок модального окна -->
                                                                                                                                                                <div class="modal-header">
                                                                                                                                                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                                                                                                                  <h4 class="modal-title">Заголовок модального окна</h4>
                                                                                                                                                                </div>
                                                                                                                                                                <!-- Основное содержимое модального окна -->
                                                                                                                                                                <div class="modal-body">
                                                                                                                                                                  Содержимое модального окна...
                                                                                                                                                                </div>
                                                                                                                                                                <!-- Футер модального окна -->
                                                                                                                                                                <div class="modal-footer">
                                                                                                                                                                  <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                                                                                                                                                  <button type="button" class="btn btn-primary">Сохранить изменения</button>
                                                                                                                                                                </div>
                                                                                                                                                              </div>
                                                                                                                                                            </div>
                                                                                                                                                          </div>
                                                                                                                                                          1. Эрик Галин # 0
                                                                                                                                                            прошу прощение при закрытии видео у меня стоит такой код повторять бы его много раз не хотелось бы
                                                                                                                                                            <script>
                                                                                                                                                            $('#myModal').on('hidden.bs.modal', function () {
                                                                                                                                                              $('iframe').attr('src', $('iframe').attr('src'));
                                                                                                                                                            })
                                                                                                                                                            </script>
                                                                                                                                                            Спасибо за внимание. Жду ответа с нетерпением
                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                              Это уже и есть решение Вашей проблемы, достаточно только изменить селектор:
                                                                                                                                                              <script>
                                                                                                                                                              $('.modal').on('hidden.bs.modal', function () {
                                                                                                                                                                $('iframe').attr('src', $('iframe').attr('src'));
                                                                                                                                                              })
                                                                                                                                                              </script>
                                                                                                                                                              
                                                                                                                                                            2. Александр Мальцев # 0
                                                                                                                                                              На эти вопросы давно уже есть ответы. Достаточно поискать в комментариях.
                                                                                                                                                              Вот, например, ответ на то, как сделать чтобы модальные окна были в разных файлах и загружались при нажатию на кнопку:
                                                                                                                                                              Ссылка на комментарий 1389.
                                                                                                                                                            3. Эрик Галин # 0
                                                                                                                                                              Почему то тут код не работает. не получается запустить модальные окна
                                                                                                                                                              В Bootstrap начиная с версии 3.3.0 параметр remote был убран. Вместо него рекомендуется использовать jQuery метод load() или другой jQuery AJAX метод (если нужно что-то более сложное).
                                                                                                                                                              Это делается за 4 шага:
                                                                                                                                                              1. Кнопки (уже есть)
                                                                                                                                                              2. Заготовка (модальное окно):
                                                                                                                                                              3. Скрипт JavaScript:
                                                                                                                                                              4. Ну и собственно шаблоны (файлы):
                                                                                                                                                              authorization.tpl
                                                                                                                                                              restorePassword.tpl
                                                                                                                                                              registration.tpl

                                                                                                                                                              Вот ссылка
                                                                                                                                                              _https://drive.google.com/file/d/0ByDpJh5AcnQIMkgtRC1FYjRSaGs/view?usp=sharing

                                                                                                                                                              Не совсем понятно зачем Вы используете setTimeout, т.к. обработка ajax запроса даже на бесплатном хостинге не превышает 200 мс. Анимация модального окна и то длится дольше (400 мс).
                                                                                                                                                              Прошу прощения я действительно не заметил данный пост. Хотя искал ответ на вопрос)
                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                Эту заготовку необходимо запускать с веб-сервера, предварительно туда её загрузив. Или хотя бы с локального (Denwer, XAMPP или что-то другое). Иначе конечно у Вас ничего работать не будет. Т.е. как у Вас будут выполняться запросы, если нет сервера.
                                                                                                                                                              2. Сергей # 0
                                                                                                                                                                Здравствуйте, подскажите пожалуйста как реализовать Модальное окно при нажатии на гиперссылку картинки

                                                                                                                                                                                        <!--Image Card-->
                                                                                                                                                                                        <div class="card hoverable">
                                                                                                                                                                                            <div class="card-image">
                                                                                                                                                                                                <div class="view overlay hm-white-slight z-depth-1">
                                                                                                                                                                                                    <img src="адрес картинки" class="img-responsive" alt="">
                                                                                                                                                                                                    <a href="#"> <!-- Гиперссылка -->
                                                                                                                                                                                                        <div class="mask waves-effect"></div>
                                                                                                                                                                                                    </a>
                                                                                                                                                                                                </div>
                                                                                                                                                                                            </div>
                                                                                                                                                                                            <div class="card-content">
                                                                                                                                                                                            </div>
                                                                                                                                                                                        </div>
                                                                                                                                                                                        <!--Image Card-->
                                                                                                                                                                
                                                                                                                                                                Создана carousel с фото и необходимо чтобы Модальное окно открывалось при нажатии на гиперссылку картинки
                                                                                                                                                                как это сделать ксажелению не можем разобраться
                                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                                  Здравствуйте.
                                                                                                                                                                  Можно использовать следующий код:
                                                                                                                                                                  $(function(){
                                                                                                                                                                    $('.card-image a').click(function(){
                                                                                                                                                                      //myModal - id модального окна
                                                                                                                                                                      $('#myModal').modal('show');
                                                                                                                                                                    });
                                                                                                                                                                  });
                                                                                                                                                                  
                                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                                    Как это можно сделать в specialpeople.club:
                                                                                                                                                                    1. Оставить только одно модальное окно и разместить его сразу под открывающим тегом body:
                                                                                                                                                                    Код модального окна
                                                                                                                                                                    <body>
                                                                                                                                                                    <div id="myModal" class="modal fade" aria-hidden="true" style="display: none;">
                                                                                                                                                                      <div class="modal-dialog">
                                                                                                                                                                        <div class="modal-content">
                                                                                                                                                                          <div class="modal-header">
                                                                                                                                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                                                                                                                            <h4 class="modal-title"></h4>
                                                                                                                                                                          </div>
                                                                                                                                                                          <div class="modal-body">
                                                                                                                                                                          </div>
                                                                                                                                                                          <div class="modal-footer">
                                                                                                                                                                          </div>
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                                    </div>
                                                                                                                                                                    ...
                                                                                                                                                                    

                                                                                                                                                                    2. Избавиться от кода JavaScript расположенного в контенте страницы.
                                                                                                                                                                    3. Добавить следующий JavaScript код в конце HTML перед закрывающим тегом body. При желании можно вынести в отдельный js-файл и подключить его к странице.
                                                                                                                                                                    Код JavaScript:
                                                                                                                                                                    <script>
                                                                                                                                                                    (function(){
                                                                                                                                                                      var contentModal = {
                                                                                                                                                                        'card-image1' : ['Special People | YouTube Chanal 1','<iframe width="560" height="315" src="https://www.youtube.com/embed/K4sR-8n1DHo" frameborder="0" allowfullscreen=""></iframe>'],
                                                                                                                                                                        'card-image2' : ['Special People | YouTube Chanal 2','<iframe width="560" height="315" src="https://www.youtube.com/embed/K4sR-8n1DHo" frameborder="0" allowfullscreen=""></iframe>']
                                                                                                                                                                      };
                                                                                                                                                                      $('#carousel-multi-item .card>div').click(function(){
                                                                                                                                                                        $myModal = $('#myModal');
                                                                                                                                                                        $image = $(this).attr('class');
                                                                                                                                                                        $myModal.find('.modal-title').html(contentModal[$image][0]);
                                                                                                                                                                        $myModal.find('.modal-body').html(contentModal[$image][1]);
                                                                                                                                                                        $('#myModal').modal('show');
                                                                                                                                                                      });
                                                                                                                                                                    })();
                                                                                                                                                                    </script>
                                                                                                                                                                    

                                                                                                                                                                    Описание кода:
                                                                                                                                                                    — заведём переменную contentModal. Она будет содержать данные, которые будут отображаться в модальном окне. Для каждой картинке необходимо указать, что будет отображаться в модальном окне: 1 — это название модального окна, 2 — это содержимое модального окна. Оформлено это в виде массива. В примере данные содержатся для двух картинок, в вашем необходимо добавить ещё 4.
                                                                                                                                                                    — остальное содержимое скрипта добавляет клик на элемент div, содержащий картинку. При нажатию на элемент, мы получаем класс у элемента (например, card-image2). После этого изменяем содержимое заголовка и тела модального окна. Далее отображаем модальное окно.
                                                                                                                                                                  2. Владимир # 0
                                                                                                                                                                    Всем добрый день!
                                                                                                                                                                    Кто-нибудь имел опыт размещения яндекс карты с определенной точкой на карте в модальном окне?
                                                                                                                                                                    1. Кирилл # 0
                                                                                                                                                                      Странно, такая кнопка не вызывает модальное окно,
                                                                                                                                                                      <a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>
                                                                                                                                                                      работает только такой вариант
                                                                                                                                                                      <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Открыть модальное окно</a>
                                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                                        Действительно, странно. Ни разу не сталкивался с такой проблемой :)
                                                                                                                                                                      2. Алёна # 0
                                                                                                                                                                        Большое спасибо за статью! Долго разбиралась с relatedTarget — вроде все просто, а примеров нигде толком нет…
                                                                                                                                                                        1. Дмитрий # 0
                                                                                                                                                                          Доброго времени суток,
                                                                                                                                                                          Как бы половчее сделать три шага:
                                                                                                                                                                          1.вывести модальное окно (с этим понятно),
                                                                                                                                                                          2. заставить его повисеть 15 сек,
                                                                                                                                                                          3. убрать с глаз долой не по кнопке, а по истечению этих 15 сек.

                                                                                                                                                                          delay () не работает в комбинации с $('#myModal').modal('show');…; $('#myModal').modal('hide');
                                                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                                                            1. Добавить у модальному окну атрибуты backdrop и data-keyboard:
                                                                                                                                                                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
                                                                                                                                                                            ...
                                                                                                                                                                            </div>
                                                                                                                                                                            
                                                                                                                                                                            2. Написать скрипт:
                                                                                                                                                                            <script>
                                                                                                                                                                            $(function(){
                                                                                                                                                                              var timer;
                                                                                                                                                                              // закроем модальное окно после 15 секунд после открытия
                                                                                                                                                                              $('#myModal').on('shown.bs.modal', function (e) {
                                                                                                                                                                                timer = setTimeout(function() { $('#myModal').modal('hide') }, 15000);
                                                                                                                                                                              });
                                                                                                                                                                              // отменяем исполнение timer при закрытии окна
                                                                                                                                                                              $('#myModal').on('hide.bs.modal', function (e) {
                                                                                                                                                                                clearTimeout(timer);
                                                                                                                                                                              });
                                                                                                                                                                            });
                                                                                                                                                                            </script>
                                                                                                                                                                            
                                                                                                                                                                            1. Дмитрий # 0
                                                                                                                                                                              Здравствуйте,
                                                                                                                                                                              не получается добиться работоспособности скрипта. модальное окно висит как ни в чем не бывало и не уходит.
                                                                                                                                                                              повесил скрипт после jquery, вроде как и надо.
                                                                                                                                                                              может быть фишка в том, что все скрипты грузятся в index.php
                                                                                                                                                                              а модальное окно вызывается через контроллер (рукописный) и теряется связь скрипта и модального окна?
                                                                                                                                                                              Не подскажете, как правильно их взаимно спозиционировать (код модального окна, скрипт, клнтроллер)?
                                                                                                                                                                          2. Maksim # 0
                                                                                                                                                                            Здравствуйте.

                                                                                                                                                                            Проблема следующая. у модального окна есть ограничение, связанное с рендерингом положения элементов при вызове экранной клавиатуры на устройствах iOS. Частично проблему можно решить изменив у модального окна свойство position в absolute. я попробовал такой скрипт:
                                                                                                                                                                            $(document).ready(function(){
                                                                                                                                                                                var isiPhone = /iPhone/i.test(navigator.userAgent.toLowerCase());
                                                                                                                                                                            if(isiPhone) {
                                                                                                                                                                                $('.modal').on('show.bs.modal', function() {      
                                                                                                                                                                                    $(this)
                                                                                                                                                                                            .css({
                                                                                                                                                                                            position: 'absolute',
                                                                                                                                                                                            marginTop: $(window).scrollTop() + 'px',
                                                                                                                                                                                            bottom: 'auto',
                                                                                                                                                                                        });
                                                                                                                                                                              
                                                                                                                                                                                    setTimeout( function() {
                                                                                                                                                                                        $('.modal-backdrop').css({
                                                                                                                                                                                            position: 'absolute', 
                                                                                                                                                                                            top: 0, 
                                                                                                                                                                                            left: 0,
                                                                                                                                                                                            width: '100%',
                                                                                                                                                                                            height: Math.max(
                                                                                                                                                                                                document.body.scrollHeight, document.documentElement.scrollHeight,
                                                                                                                                                                                                document.body.offsetHeight, document.documentElement.offsetHeight,
                                                                                                                                                                                                document.body.clientHeight, document.documentElement.clientHeight
                                                                                                                                                                                            ) + 'px'
                                                                                                                                                                                        });
                                                                                                                                                                                    }, 500);
                                                                                                                                                                                });
                                                                                                                                                                            }});
                                                                                                                                                                            
                                                                                                                                                                            он работает. окно позиционируется как абсолютное, а подложка (modal-backdrop), по таймеру, успевает перерисоваться под размер модали. При вызове экранной клавиатуры фокус работает в порядке и нет неприятных скачков. НО! модальное окно скроллится вместе с документом, и если документ длинный, а модальное окно маленькое — получаются неприятные пустоты сверху и снизу. Повторюсь, речь идет только про iOS устройства.
                                                                                                                                                                            Есть ли какие-то другие способы избежать скроллинга докуменкта вместе с окном?
                                                                                                                                                                            Попробовал задержать по таймеру корректировку фокуса, но тоже не получается
                                                                                                                                                                            $(document).on('blur', 'input, textarea', function () {
                                                                                                                                                                                setTimeout(function () {
                                                                                                                                                                                    window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
                                                                                                                                                                                }, 10);
                                                                                                                                                                            });
                                                                                                                                                                            
                                                                                                                                                                            
                                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                                              Попробуйте добавить следующее:
                                                                                                                                                                              /* CSS */
                                                                                                                                                                              .modal-open {
                                                                                                                                                                                position: fixed;
                                                                                                                                                                                overflow: hidden;
                                                                                                                                                                              }
                                                                                                                                                                              
                                                                                                                                                                              1. Maksim # 0
                                                                                                                                                                                я так пробовал уже. работает некорректно. при фокусе на input элементе в модальном окне, документ возвращается в начало.

                                                                                                                                                                                попробовал другой вариант.
                                                                                                                                                                                $(document).ready(function(){
                                                                                                                                                                                    var isiPhone = /iPhone/i.test(navigator.userAgent.toLowerCase());
                                                                                                                                                                                        if(isiPhone) {
                                                                                                                                                                                        $('.modal').on('shown.bs.modal', function() {
                                                                                                                                                                                            var currentscroll = $(window).scrollTop();
                                                                                                                                                                                            
                                                                                                                                                                                                   $('input').on('focus', function() {
                                                                                                                                                                                                        $('.modal').css({
                                                                                                                                                                                                        position: 'absolute',
                                                                                                                                                                                                    });
                                                                                                                                                                                                       $('input').scrollTop($(window).scrollTop());
                                                                                                                                                                                                   });
                                                                                                                                                                                                       
                                                                                                                                                                                               $('input').on('blur', function() {
                                                                                                                                                                                                        $('.modal').css({
                                                                                                                                                                                                        position: 'fixed',
                                                                                                                                                                                                        bottom: 'auto',
                                                                                                                                                                                                        top:'auto'
                                                                                                                                                                                                    });
                                                                                                                                                                                                   });
                                                                                                                                                                                        var currentscroll = $(window).scrollTop();
                                                                                                                                                                                        $('input').on('blur', function() {
                                                                                                                                                                                                    if (!event.relatedTarget) {
                                                                                                                                                                                                    $(window).scrollTop(currentscroll);
                                                                                                                                                                                                    }
                                                                                                                                                                                            });
                                                                                                                                                                                
                                                                                                                                                                                     });
                                                                                                                                                                                }});
                                                                                                                                                                                
                                                                                                                                                                                по умолчанию у .modal позиция fixed. позиция меняется при фокусе на input и возвращается при blur.
                                                                                                                                                                                попробовал запомнить текущее расположение window и вернуть обратно. тоже самое происходит — .modal скроллится в начало документа.
                                                                                                                                                                            2. Владислав # 0
                                                                                                                                                                              Здравствуйте Александр, использовал ваш пример для открытия модального окна с помощью атрибутов data работает без проблем, но с помощью JavaScript не работает?
                                                                                                                                                                              1. Владислав # 0
                                                                                                                                                                                Разобрался. Всё работает. надо было после jquery скрипт вставить. Спасибо
                                                                                                                                                                              2. Maksim # 0
                                                                                                                                                                                Александр, здравствуйте. Проблема с input внутри модального окна.
                                                                                                                                                                                <div class="modal fade">
                                                                                                                                                                                      <div class="modal-dialog">
                                                                                                                                                                                            <div class="modal-content">
                                                                                                                                                                                                  <div class="modal-body">
                                                                                                                                                                                                    <form class="form-horizontal">
                                                                                                                                                                                                          <p>Обычная форма</p>
                                                                                                                                                                                                           <div class="form-group">
                                                                                                                                                                                                                <label for="input1"><span">Старый пароль</span></label>
                                                                                                                                                                                                                <input type="password" id="input1" maxlength="20">
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                <label for="input2"><span>Новый пароль</span></label>
                                                                                                                                                                                                                <input type="password" id="input2" maxlength="20">
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                            <button type="button">изменить пароль</button>
                                                                                                                                                                                                        </form>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                            </div>
                                                                                                                                                                                      </div>
                                                                                                                                                                                </div>
                                                                                                                                                                                
                                                                                                                                                                                
                                                                                                                                                                                стили все дефолтные (Bootstrap), кроме
                                                                                                                                                                                html, body {height: 100%;
                                                                                                                                                                                -webkit-overflow-scrolling: touch;
                                                                                                                                                                                }
                                                                                                                                                                                body{overflow-y: scroll;}
                                                                                                                                                                                
                                                                                                                                                                                
                                                                                                                                                                                проблема в том, что на смарфтоне (Android) экранная клавиатура закрывает поля input, т.е. приходится скроллить вручную, чтобы увидеть что вводится. Возможно ли с помощью JS исправить положение input при выводе клавиатуры?
                                                                                                                                                                                1. Dmitry # 0
                                                                                                                                                                                  Здравствуйте, есть страница товара. На этой странице есть кнопка быстрого заказа. Кликая на эту кнопку всплывает модальное окно. Как сделать так, чтобы при клике поля товар, фото и цена подставлялись в заголовок?
                                                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                                    1. При нажатию на кнопку, получить блок, к которому относится эта кнопка.
                                                                                                                                                                                    2. Получить необходимые элементы.
                                                                                                                                                                                    var h1 = $('h1').html()
                                                                                                                                                                                    var img = $('.shop-item-container img')[0];
                                                                                                                                                                                    var price = $('.shop-item-container .price');
                                                                                                                                                                                    
                                                                                                                                                                                    3. Вставить эти элементы в модальное окно.
                                                                                                                                                                                    1. Dmitry # 0
                                                                                                                                                                                      а можно весь код показать в идеале) спасибо
                                                                                                                                                                                    2. Александр Мальцев # 0
                                                                                                                                                                                      HTML-код:
                                                                                                                                                                                      <!-- Модальное окно -->
                                                                                                                                                                                      <div class="modal fade" id="myModal" tabindex="-1">
                                                                                                                                                                                        <div class="modal-dialog">
                                                                                                                                                                                          <div class="modal-content">
                                                                                                                                                                                            <div class="modal-header">
                                                                                                                                                                                              <button type="button" class="close" data-dismiss="modal">×</button>
                                                                                                                                                                                              <h4 class="modal-title" id="myModalLabel">Заголовок модального окна</h4>
                                                                                                                                                                                            </div>
                                                                                                                                                                                            <div class="modal-body">
                                                                                                                                                                                              <p id="itemTitle" class="lead"></p>
                                                                                                                                                                                              <img class="img-responsive" id="itemImage" src="">
                                                                                                                                                                                              <p id="itemPrice"></p>
                                                                                                                                                                                            </div>
                                                                                                                                                                                            <div class="modal-footer">
                                                                                                                                                                                              <button type="button" class="btn btn-primary">Заказать</button>
                                                                                                                                                                                            </div>
                                                                                                                                                                                          </div>
                                                                                                                                                                                        </div>
                                                                                                                                                                                      </div>
                                                                                                                                                                                      
                                                                                                                                                                                      <-- Блок, содержащий товар -->
                                                                                                                                                                                      <div class="shop">
                                                                                                                                                                                        <h1>Название товара</h1>
                                                                                                                                                                                        <img src="images/itchief.png">
                                                                                                                                                                                        <p class="price">Цена</p>
                                                                                                                                                                                        <button class="buy">Купить в один клик</button>
                                                                                                                                                                                      </div>
                                                                                                                                                                                      
                                                                                                                                                                                      <-- Блок, содержащий товар -->
                                                                                                                                                                                      <div class="shop">
                                                                                                                                                                                        <h1>Название товара 2</h1>
                                                                                                                                                                                        <img src="images/itchief.png">
                                                                                                                                                                                        <p class="price">Цена 2</p>
                                                                                                                                                                                        <button class="buy">Купить в один клик</button>
                                                                                                                                                                                      </div>
                                                                                                                                                                                      
                                                                                                                                                                                      Код JavaScript:
                                                                                                                                                                                      <script>
                                                                                                                                                                                      $(function(){
                                                                                                                                                                                        $('button.buy').click(function(){
                                                                                                                                                                                          var item = $(this).closest('.shop');
                                                                                                                                                                                          var itemTitle = item.find('h1');
                                                                                                                                                                                          var itemImage = item.find('img');
                                                                                                                                                                                          var itemPrice = item.find('.price');
                                                                                                                                                                                          $('#itemTitle').html(itemTitle.html());
                                                                                                                                                                                          $('#itemImage').attr('src',itemImage.attr('src'));
                                                                                                                                                                                          $('#itemPrice').html(itemPrice.html());
                                                                                                                                                                                          $('#myModal').modal('show');
                                                                                                                                                                                        });
                                                                                                                                                                                      });
                                                                                                                                                                                      </script>
                                                                                                                                                                                      
                                                                                                                                                                                      1. Dmitry # 0
                                                                                                                                                                                        спасибо
                                                                                                                                                                                    3. Aleksandr Ustinov # 0
                                                                                                                                                                                      Добрый день у меня такой вот вопрос
                                                                                                                                                                                      Есть форма с выбором селект itchief.ru/assets/uploadify/2/f/8/2f8517d0e06cd3a71a79abca0561ef39.png
                                                                                                                                                                                      По нажатию кнопки «оплатить» необходимо передать в модальное окно значение в данный момент выбранное в форме, подскажите как это можно сделать
                                                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                                                        1. Подписаться на событие click кнопки
                                                                                                                                                                                        2. В обработчике этого события:
                                                                                                                                                                                        2.1. Получить выбранное значение и сохранить его в некоторую переменную:
                                                                                                                                                                                        var var1 = $("#idselect option:selected" ).text();
                                                                                                                                                                                        //idselect - идентификатор элемента select
                                                                                                                                                                                        
                                                                                                                                                                                        2.2. В модальном окне получить элемент, в который необходимо вывести это значение:
                                                                                                                                                                                        var elem1 = $("#idelement" );
                                                                                                                                                                                        //idelement - идентификатор элемента модального окна, в который необходимо вывести значение
                                                                                                                                                                                        
                                                                                                                                                                                        2.3. Изменить содержимое этого элемента:
                                                                                                                                                                                        elem1.text(var1);
                                                                                                                                                                                        
                                                                                                                                                                                        2.4. Открыть модальное окно.

                                                                                                                                                                                        В итоге получится следующий код:
                                                                                                                                                                                        <script>
                                                                                                                                                                                        $(function(){
                                                                                                                                                                                          $('#pay').click(function(){
                                                                                                                                                                                            var var1 = $("#idselect option:selected" ).text();
                                                                                                                                                                                            var elem1 = $("#idelement" );
                                                                                                                                                                                            elem1.text(var1);
                                                                                                                                                                                            $('#myModal').modal('show');
                                                                                                                                                                                          });
                                                                                                                                                                                        });
                                                                                                                                                                                        </script>
                                                                                                                                                                                        
                                                                                                                                                                                        1. Aleksandr Ustinov # 0
                                                                                                                                                                                          Спасибо за моментальный ответ, как всегда выручаете. Всем рекомендую ваш сайт=)
                                                                                                                                                                                      2. сергей # 0
                                                                                                                                                                                        Здравствуйте! Как сделать что бы модальное окно для одного ipпоявляласб раз в сутки? Т.Е. если человек уже видел это окно то на его айпи за сутки больше не показывать. Окно появляется сразу при переходе на сайт. (Возрастное ограничение типо) Спасибо за ответ или за ссылки где это обсуждалось
                                                                                                                                                                                        1. сергей # 0
                                                                                                                                                                                          Спасибо вопрос решил с помощью script jquery.cookie.min.js
                                                                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                                                                            Здравствуйте.
                                                                                                                                                                                            Зачем такие сложности, тем более что несколько пользователей могут иметь один ip. Т.е. Вам необходимо будет иметь базу данных, где необходимо будет хранить ip адреса, дату отображения модального окна и т.д.
                                                                                                                                                                                            Лучше использовать для этого cookie или LocalStorage браузера пользователя. Т.е. заводите в хранилище браузера пользователя параметр, например, showModal и сохраняете в качестве его значения дату показа модального окна. Если дата не соответствует текущей, то отображаете модальное окно, иначе не показываете.
                                                                                                                                                                                            Как это сделать можно посмотреть в этом комментарии.
                                                                                                                                                                                            1. сергей # 0
                                                                                                                                                                                              Да отлично всё поручилось, а если не по суткам а по времени например через каждые 5 часов что бы выскакивало? Извините конечно за наглость)) и ещё такой момент на ПК ip меняю окно выпадает а на планшете меняю окно не появляется! Один раз только появилось и всё
                                                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                                                С помощью LocalStorage Вы привязываете модальное окно к конкретному браузеру, а не к IP.
                                                                                                                                                                                                Через каждые 5 часов:
                                                                                                                                                                                                <script>
                                                                                                                                                                                                // 1 час = 1000мс*60сек*60мин = 3600000 мс
                                                                                                                                                                                                $(function() {
                                                                                                                                                                                                  // получить значение даты из LocalStorage
                                                                                                                                                                                                  var dateModalShow = localStorage.getItem("dateModalShow");
                                                                                                                                                                                                  // получить значение текущей даты
                                                                                                                                                                                                  var currentDate = new Date().toString();
                                                                                                                                                                                                  // если значение даты в LocalStorage равно null или
                                                                                                                                                                                                  // не равно текущей даты 
                                                                                                                                                                                                  // (т.е. если модальное окно сегодня не показывалось, то)
                                                                                                                                                                                                  if (dateModalShow=null || (((((new Date(currentDate)).getTime())- ((new Date(dateModalShow)).getTime()))/3600000)>5) ) {  
                                                                                                                                                                                                    // открываем модальное окно
                                                                                                                                                                                                    $("#myModal").modal('show');
                                                                                                                                                                                                    // сохраняем дату открытия модального окна в LocalStorage
                                                                                                                                                                                                    localStorage.setItem("dateModalShow", currentDate);
                                                                                                                                                                                                  }
                                                                                                                                                                                                });
                                                                                                                                                                                                </script>
                                                                                                                                                                                                
                                                                                                                                                                                                Если Вам нужно ещё учитывать IP, то в данном случае только через сервер.
                                                                                                                                                                                          2. Сергей Коваленко # 0
                                                                                                                                                                                            Здравствуйте) Подскажите как сделать чтобы при нажатии на ссылку с классом .btn открывалось модальное окно с картинкой и описанием, но при нажатии средней клавишей мыши или же через правую клавишу>открыть ссылку в новой вкладке(окне) открывалась просто картинка. HTML содержит у меня сейчас следующее —
                                                                                                                                                                                            Ссылка с картинкой:
                                                                                                                                                                                            <figure>
                                                                                                                                                                                            	<img class="img-responsive" src="images/portfolio/folio01.jpg" alt="">
                                                                                                                                                                                            	<figcaption>
                                                                                                                                                                                            		<h5>DASHBOARD</h5>
                                                                                                                                                                                            		<a data-toggle="modal" href="#modal_img3" class="btn btn-primary btn-lg">Take a Look</a>
                                                                                                                                                                                            	</figcaption><!-- /figcaption -->
                                                                                                                                                                                            </figure>
                                                                                                                                                                                            Модальное окно:
                                                                                                                                                                                            <div class="modal fade modal_img" id="modal_img3" data-modal="form" aria-hidden="false" tabindex="-1">
                                                                                                                                                                                            	<div class="modal-dialog">
                                                                                                                                                                                            		<div class="modal-content">
                                                                                                                                                                                            			<div class="modal-header">
                                                                                                                                                                                            				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                                                                                                                                            				<h4 class="modal-title">Project Title</h4>
                                                                                                                                                                                            			</div>
                                                                                                                                                                                            			<div class="modal-body">
                                                                                                                                                                                            				<p><img class="img-responsive" src="images/portfolio/folio01.jpg" alt=""></p>
                                                                                                                                                                                            				<p>This project was crafted for Some Name corp. Detail here a little about your job requirements and the tools used. Tell about the challenges faced and what you and your team did to solve it.</p>
                                                                                                                                                                                            				<p><b><a href="#">Visit Site</a></b></p>
                                                                                                                                                                                            			</div>
                                                                                                                                                                                            			<div class="modal-footer">
                                                                                                                                                                                            				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                                                                                            			</div>
                                                                                                                                                                                            		</div><!-- /.modal-content -->
                                                                                                                                                                                            	</div><!-- /.modal-dialog -->
                                                                                                                                                                                            </div><!-- /.modal -->
                                                                                                                                                                                            Подключены только bootstrap.js и jquery.js.

                                                                                                                                                                                            Собственно с модальным окном все ок, но при открытии в новой вкладке открывается ссылка сайта+ID в href.
                                                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                                                              Добавить идентификатор к изображению и кнопки:
                                                                                                                                                                                              <figure>
                                                                                                                                                                                                <img id="myImage" class="img-responsive" src="images/portfolio/folio01.jpg" alt="">
                                                                                                                                                                                                <figcaption>
                                                                                                                                                                                                  ...
                                                                                                                                                                                                  <a id="mybtn" data-toggle="modal" href="#modal_img3" class="fancyimage btn btn-primary btn-lg">Take a Look</a>
                                                                                                                                                                                                </figcaption>
                                                                                                                                                                                              </figure>
                                                                                                                                                                                              
                                                                                                                                                                                              Добавить к странице скрипт:
                                                                                                                                                                                              <script>
                                                                                                                                                                                              $(function(){
                                                                                                                                                                                                function openImage() {
                                                                                                                                                                                                  var myImage = document.getElementById('myImage');
                                                                                                                                                                                                  window.open(myImage.src, '_blank');
                                                                                                                                                                                                }
                                                                                                                                                                                                $('#mybtn').click(function(e){
                                                                                                                                                                                                  e.preventDefault();
                                                                                                                                                                                                  if (e.which==2) 
                                                                                                                                                                                                    openImage();
                                                                                                                                                                                                });
                                                                                                                                                                                                $('#mybtn').contextmenu(function(e){
                                                                                                                                                                                                  e.preventDefault();
                                                                                                                                                                                                  openImage();
                                                                                                                                                                                                  return false;
                                                                                                                                                                                                }); 
                                                                                                                                                                                              });
                                                                                                                                                                                              </script>
                                                                                                                                                                                              
                                                                                                                                                                                              1. Сергей Коваленко # 0
                                                                                                                                                                                                Спасибо огромное, работает. Но, к примеру у меня много таких картинок на странице и к каждому привязано модальное окно. Как изменить в таком случае код скрипта? Просто каждой картинке и кнопке присваивать один и тот же ID как бы не позволяет валидатор wc3, кричит что ID повторяется.
                                                                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                                                                  Если у Вас картинок много, то Вам необходимо при нажатии на кнопку определить изображение, которое связано с ним. Модальное окно желательно использовать одно, т.к. Вы можете изменить его содержимое перед тем как вывести.
                                                                                                                                                                                                  1. Добавить к каждой кнопки класс, например mybtn
                                                                                                                                                                                                  2. В модальном окне к элементу img добавить класс myImageModal
                                                                                                                                                                                                  Скрипт будет следующим:
                                                                                                                                                                                                  $(function(){
                                                                                                                                                                                                    // перебрать каждую кнопку с классом mybtn
                                                                                                                                                                                                    $(".mybtn").each(function() {
                                                                                                                                                                                                      // при нажатию на кнопку
                                                                                                                                                                                                      $(this).click(function() {
                                                                                                                                                                                                        // получить изображение, которое связанно с этой кнопкной
                                                                                                                                                                                                        var imgsrc = ($(this)).closest('figure').find('img').attr('src');
                                                                                                                                                                                                        // изменить src изображения в модальном окне
                                                                                                                                                                                                        $('#myImageModal').attr('src',imgsrc);
                                                                                                                                                                                                        // открыть модальное окно      
                                                                                                                                                                                                        $('#modal_img3').modal('show');
                                                                                                                                                                                                      });
                                                                                                                                                                                                    });
                                                                                                                                                                                                  });
                                                                                                                                                                                                  
                                                                                                                                                                                            2. Иван # 0
                                                                                                                                                                                              Добрый день Александр!
                                                                                                                                                                                              Спасибо Вам за Ваши труды, очень всем помогаете! ))
                                                                                                                                                                                              Подскажите пожалуйста решить задачку:

                                                                                                                                                                                              необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом., при этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано)
                                                                                                                                                                                              пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно ))
                                                                                                                                                                                              вот собственно пример:
                                                                                                                                                                                              <script>
                                                                                                                                                                                              (function($) {
                                                                                                                                                                                              $(function() {
                                                                                                                                                                                              
                                                                                                                                                                                                // Проверим, есть ли запись в куках о посещении посетителя
                                                                                                                                                                                                // Если запись есть - ничего не делаем
                                                                                                                                                                                                if (!$.cookie('was')) {
                                                                                                                                                                                              
                                                                                                                                                                                                  // Покажем всплывающее окно
                                                                                                                                                                                                  $('#boxUserFirstInfo').arcticmodal({
                                                                                                                                                                                                    closeOnOverlayClick: false,
                                                                                                                                                                                                    closeOnEsc: true
                                                                                                                                                                                                  });
                                                                                                                                                                                              
                                                                                                                                                                                                }
                                                                                                                                                                                              
                                                                                                                                                                                                // Запомним в куках, что посетитель к нам уже заходил
                                                                                                                                                                                                $.cookie('was', true, {
                                                                                                                                                                                                  expires: 365,
                                                                                                                                                                                                  path: '/'
                                                                                                                                                                                                });
                                                                                                                                                                                              
                                                                                                                                                                                              })
                                                                                                                                                                                              })(jQuery)
                                                                                                                                                                                              </script>
                                                                                                                                                                                              помогите пожалуйста реализовать данную функцию?
                                                                                                                                                                                              Буду очень рад Вашей помощи! уж очень выручите ))
                                                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                                                Здравствуйте, Иван.
                                                                                                                                                                                                В JavaScript невозможно определить на каком расстоянии курсор находится от кнопки закрытия вкладки страницы или браузера. Следовательно, реализовать подобный функционал просто не представляется возможным.
                                                                                                                                                                                                1. Иван # 0
                                                                                                                                                                                                  Добрый день Александр!
                                                                                                                                                                                                  Ну а если вариант, при попытке закрыть вкладку браузера?
                                                                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                                                                    Думаю и это в настоящее время не возможно. Т.к. большинство браузеров попросту игнорируют результат события onbeforeunload, которое происходит перед выгрузкой страницы. Т.е. Вы не сможете предотвратить закрытие вкладки, если пользователь этого захочет.
                                                                                                                                                                                                    1. Иван # 0
                                                                                                                                                                                                      спасибо за информацию Александр! Скажите, а если так, к примеру, чтобы модальное окно появлялась через, скажем, 60 секунд после загрузки страницы, но появлялась всего один раз для каждого нового пользователя, чтобы проверялись куки файлы на наличие ранних посещений пользователя
                                                                                                                                                                                                      if (!$.cookie('was')) {
                                                                                                                                                                                                      и после запоминалось это посещение, чтобы больше окно для такого пользователя не появлялось…
                                                                                                                                                                                                      // Запомним в куках, что посетитель к нам уже заходил
                                                                                                                                                                                                        $.cookie('was', true, {
                                                                                                                                                                                                          expires: 365,
                                                                                                                                                                                                          path: '/'
                                                                                                                                                                                                        });
                                                                                                                                                                                                      буду очень благодарен за помощь, если такой вариант возможен конечно
                                                                                                                                                                                              2. Alexey # 0
                                                                                                                                                                                                Здравствуйте!
                                                                                                                                                                                                Очень нужна помощь: не соображу, как создать такое модальное окно, чтобы всплывало при первом входе посетителя на сайт, блокировало сайт и не закрывалось, пока посетитель не кликнет по кнопке в модальном окне. Это нужно для подтверждения, что посетителю исполнилось 18, а если он не подтвердит, то сайт для него не будет доступен.
                                                                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                                                                  Для этого необходимо к модальному окну добавить параметры: data-backdrop=«static» и data-keyboard=«false». Они подробно описаны в разделе «Параметры модального окна».
                                                                                                                                                                                                  Решение будет таким:
                                                                                                                                                                                                  <div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
                                                                                                                                                                                                    <div class="modal-dialog" role="document">
                                                                                                                                                                                                      <div class="modal-content">
                                                                                                                                                                                                        <div class="modal-header">
                                                                                                                                                                                                          <h4 class="modal-title" id="myModalLabel">Подтверждение</h4>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                        <div class="modal-body">
                                                                                                                                                                                                          Описание:
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                        <div class="modal-footer">
                                                                                                                                                                                                          <button type="button" class="btn btn-danger" data-dismiss="modal">Да, мне исполнилось 18 лет</button>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                      </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                  </div>
                                                                                                                                                                                                  
                                                                                                                                                                                                  Плюс скрипт, который будет открывать модальное окно после загрузки страницы:
                                                                                                                                                                                                  <script>
                                                                                                                                                                                                  $(function() {
                                                                                                                                                                                                    $('#myModal').modal('show');
                                                                                                                                                                                                  });
                                                                                                                                                                                                  </script>
                                                                                                                                                                                                  
                                                                                                                                                                                                2. Иван # 0
                                                                                                                                                                                                  Здравствуйте, Александр.
                                                                                                                                                                                                  Не подскажете, как сделать так, чтобы скрипт запускался только на больших экранах? Модальное окно появляется при заходе пользователя на страницу
                                                                                                                                                                                                  $(window).load(function(){
                                                                                                                                                                                                    $('#slider-modal').modal('show');
                                                                                                                                                                                                  });
                                                                                                                                                                                                  
                                                                                                                                                                                                  соответственно кнопки, которую можно скрыть нету =(
                                                                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                                                                    Проверить ширину документа и если он больше 1200px (lg), то тогда открывать:
                                                                                                                                                                                                    $(window).load(function(){
                                                                                                                                                                                                      if ($(document).width()>=1200) {
                                                                                                                                                                                                        $('#slider-modal').modal('show');
                                                                                                                                                                                                      }
                                                                                                                                                                                                    });
                                                                                                                                                                                                    
                                                                                                                                                                                                    1. Иван # 0
                                                                                                                                                                                                      Спасибо, заработало =)
                                                                                                                                                                                                  2. Андрей # 0
                                                                                                                                                                                                    Здравствуйте, Александр.
                                                                                                                                                                                                    А как сделать окно фиксированной высоты/ширины. Я в окно вывожу список (
                                                                                                                                                                                                      ) и элементы списка периодически добавляются.
                                                                                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                                                                                      С помощью CSS:
                                                                                                                                                                                                      .modal-body {
                                                                                                                                                                                                        /* отображать полосу прокрутки, когда контент не вмещается в height=300px  */
                                                                                                                                                                                                        overflow-y: auto;
                                                                                                                                                                                                        /* высота области, в которой отображается контент модального окна */
                                                                                                                                                                                                        height: 200px;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      .modal-dialog {
                                                                                                                                                                                                        /* ширина модального окна */
                                                                                                                                                                                                        width: 200px;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      
                                                                                                                                                                                                      Более гибко, если это надо можно настроить с помощью медиа запросов:
                                                                                                                                                                                                      .modal-body {
                                                                                                                                                                                                        overflow-y: auto;
                                                                                                                                                                                                        height: 200px;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      .modal-dialog {
                                                                                                                                                                                                        width: 200px;
                                                                                                                                                                                                      }
                                                                                                                                                                                                      @media (min-width: 768px) {
                                                                                                                                                                                                        .modal-body {
                                                                                                                                                                                                          overflow-y: auto;
                                                                                                                                                                                                          height: 400px;
                                                                                                                                                                                                        }
                                                                                                                                                                                                        .modal-dialog {
                                                                                                                                                                                                          width: 400px;
                                                                                                                                                                                                        }
                                                                                                                                                                                                      }
                                                                                                                                                                                                      @media (min-width: 992px) {
                                                                                                                                                                                                        /* ... */
                                                                                                                                                                                                      }
                                                                                                                                                                                                      @media (min-width: 1200px) {
                                                                                                                                                                                                        /* ... */
                                                                                                                                                                                                      }
                                                                                                                                                                                                      
                                                                                                                                                                                                    2. Fox # 0
                                                                                                                                                                                                      Здравствуйте! Подскажите, пожалуйста, почему не добавляется padding-right:17(15)px при открытии модельного окна, а добавляется padding-right:0px и при открытии сайт дергается вправо, вроде де же bootstrap должен рассчитывать ширину скролла и в зависимости есть он или нет добавлять padding-right?

                                                                                                                                                                                                      Например: на этом сайте http://bootstrap-3.ru... есть эта проблема, при открытии демо модального окна добавляется padding-right:0px и сайт дергает вправо, а вот на http://getbootstrap.com... сайте такого нет, там добавляется padding-right:17px и всё в порядке, что там, что тут используется один и тот же bootstrap.js

                                                                                                                                                                                                      Спасибо.
                                                                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                                                                        А с чего Вы взяли что они используют одинаковую версию бутстрап. На официальном сайте последняя на текущий момент версия (3.3.7). На русском копипасте используется довольно старая версия (3.1.1). В этом и проблема.
                                                                                                                                                                                                      2. Fox # 0
                                                                                                                                                                                                        В этом и прикол, у меня 3.3.7 с getbootstrap.com, а русский сайт я для наглядности в пример привёл.
                                                                                                                                                                                                        1. Александр Мальцев # 0
                                                                                                                                                                                                          Попробуйте разместить код модального окна в соотвествии с рекомендацией изложенной в начале статьи (особенности компонента modal), т.е. сразу после открывающего тега body.
                                                                                                                                                                                                        2. Юрий # 0
                                                                                                                                                                                                          Добрый день! Спасибо за полезную статью.
                                                                                                                                                                                                          Подскажите, у меня в модальном окне вставлена форма обратной связи.
                                                                                                                                                                                                          В форме есть проверка на неправильно введенный e-mail
                                                                                                                                                                                                          Если пользователь заполнит форму и нажимает «Отправить», то модальное окно скрывается.
                                                                                                                                                                                                          А как сделать так, чтобы не скрывалось, ведь пользователь должен увидеть, что e-mail указано не верно.
                                                                                                                                                                                                          Либо если указал верно, то он должен увидеть сообщение, что форма отправлена, но он не видит этого, так как модальное окно закрывается.
                                                                                                                                                                                                          Спасибо!
                                                                                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                                                                                            Чтобы это осуществить необходимо использовать AJAX.
                                                                                                                                                                                                            Посмотреть как это можно выполнить можно в статье Выезжающая форма обратной связи.
                                                                                                                                                                                                          2. Игорь # 0
                                                                                                                                                                                                            Здравствуйте! Подскажите, в чем может быть проблема. При установке любого модального окна, открываются сразу два окна, см. скриншот.
                                                                                                                                                                                                            itchief.ru/assets/uploadify/6/a/5/6a5406a3b0bdb260c10fb4b4d56c24e9.png
                                                                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                                                                              Если Вы используете data-атрибуты, то у кнопки, открывающей модальное окно в качестве значения атрибута data-target должен быть указан селектор (например, #myModal) который бы одназначно определял то модальное окно (id=''myModal''), которое необходимо открыть.

                                                                                                                                                                                                              А если например Вы у кнопки укажете data-target=''.modal'' и у Вас на странице есть несколько модальных окон (class=''modal fade''), то будут открыты (выбраны) столько модальных окон, сколько из них имеют класс modal.

                                                                                                                                                                                                              Чтобы разобраться с этим вопросом можно почитать статью про CSS селекторы.
                                                                                                                                                                                                            2. макс # 0
                                                                                                                                                                                                              Добрый день!
                                                                                                                                                                                                              Подскажите, как можно сделать следующее: внутри модального окна есть ссылка:
                                                                                                                                                                                                              <a href="#contact">Текст ссылки</a>
                                                                                                                                                                                                              
                                                                                                                                                                                                              Как сделать, чтобы по ее нажатию модульное окно пропадало? Спасибо.
                                                                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                                                                Написать скрипт:
                                                                                                                                                                                                                // contact - id кнопки внутри модального окна
                                                                                                                                                                                                                // myModal - id модального окна
                                                                                                                                                                                                                $(function(){
                                                                                                                                                                                                                  $('#contact').click(function(){
                                                                                                                                                                                                                    $('#myModal').modal('hide');
                                                                                                                                                                                                                  });
                                                                                                                                                                                                                });
                                                                                                                                                                                                                
                                                                                                                                                                                                              2. Игорь # 0
                                                                                                                                                                                                                Добрый день.
                                                                                                                                                                                                                Использую одно модальное окно для редакции данных моделей. Когда открывается модальное окно должны поменяться данные в форме, и тд. для конкретной модели. Это все сделал через скрипт

                                                                                                                                                                                                                $('#modaledite').on('show.bs.modal', function (e)
                                                                                                                                                                                                                	{
                                                                                                                                                                                                                	var pageelsement = $(e.relatedTarget).parent().parent().parent();
                                                                                                                                                                                                                	var idpage = pageelsement.attr('id').split('_')[2];
                                                                                                                                                                                                                
                                                                                                                                                                                                                	$.getJSON('ajaxgetmodel', {id:idpage, type:'page'}, function(data)
                                                                                                                                                                                                                		{
                                                                                                                                                                                                                		var formeditepage = $('#editePage');
                                                                                                                                                                                                                
                                                                                                                                                                                                                		formeditepage.data('yiiActiveForm').settings.validationUrl = '$editepageurl?id=' + idpage;
                                                                                                                                                                                                                		formeditepage.attr('action', '$editepageurl?id=' + idpage);
                                                                                                                                                                                                                
                                                                                                                                                                                                                		formeditepage.find('#editepage-login').val(data.login);
                                                                                                                                                                                                                		formeditepage.find('#editepage-password').val(data.password);
                                                                                                                                                                                                                
                                                                                                                                                                                                                		});
                                                                                                                                                                                                                	});
                                                                                                                                                                                                                
                                                                                                                                                                                                                Проблема в том что данные в форме обновляются после появления модального окна. А нужно сначала обновить данные а потом открыть модальное окно. Вроде оно так и должно произойти но открытия происходит во время работы аякса.
                                                                                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                                                                                  Здравствуйте.
                                                                                                                                                                                                                  То, что Вы описали, не может случиться мгновенно.
                                                                                                                                                                                                                  1 Вариант. Можно сделать так, как Вы это сделали выше. Т.е. сразу отображать модальное окно. Но немного изменить код, а именно: добавить какую-нибудь вращающуюся иконку и как только данные придут с сервера, убрать иконку и отобразить данные.
                                                                                                                                                                                                                  2 Вариант. Повесить обработчик не на открытие формы, а на элемент, с помощью которого Вы открываете модальное окно. В этом обработчике сначала получить данные с сервера, обновить код модального окна, а потом его открыть. Если задержка при получении данных невелика, то пользователь этого не заметит.
                                                                                                                                                                                                                  $('#modaledite').modal('show');
                                                                                                                                                                                                                  
                                                                                                                                                                                                                  1. Игорь # 0
                                                                                                                                                                                                                    Огромное вам спасибо за совет. Сделал по второму варианту. Только не давно начал практиковать javascript и jquery, не могли бы вы посмотреть на код, очень будут кстати замечания, советы по оптимизации.

                                                                                                                                                                                                                    $(document).ready(function()
                                                                                                                                                                                                                        {
                                                                                                                                                                                                                        var buttons = $(".pageelsement .btn"); // Одна из управляющих кнопок
                                                                                                                                                                                                                    
                                                                                                                                                                                                                        buttons.click(function(e)
                                                                                                                                                                                                                            {
                                                                                                                                                                                                                            if(this.getAttribute('data_action') == 'edite') // Кнопка редактирования
                                                                                                                                                                                                                                {
                                                                                                                                                                                                                                var pageelsement = $(this).parent().parent().parent();
                                                                                                                                                                                                                                var idpage = pageelsement.attr('id').split('_')[2];
                                                                                                                                                                                                                    
                                                                                                                                                                                                                                $.getJSON('ajaxgetmodel', {id:idpage, type:'page'}, function(data)
                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                    				var formeditepage = $('#editePage');
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    				formeditepage.data('yiiActiveForm').settings.validationUrl = '$editepageurl?id=' + idpage;
                                                                                                                                                                                                                    				formeditepage.attr('action', '$editepageurl?id=' + idpage);
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    				formeditepage.find('#editepage-login').val(data.login);
                                                                                                                                                                                                                    				formeditepage.find('#editepage-password').val(data.password);
                                                                                                                                                                                                                    				
                                                                                                                                                                                                                    				$('#modaledite').modal('show');
                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                    
                                                                                                                                                                                                                                }
                                                                                                                                                                                                                            });
                                                                                                                                                                                                                    
                                                                                                                                                                                                                        });
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                                                                                                      Нормальный код, только желательно бы его отформатировать.
                                                                                                                                                                                                                      1. Игорь # 0
                                                                                                                                                                                                                        Спасибо за внимание.
                                                                                                                                                                                                                2. Ксюша # 0
                                                                                                                                                                                                                  Доброе утро
                                                                                                                                                                                                                  Спасибо, так помогла ваша инфо о модальном окне, как раз то, что нужно было для моей задумки!!! Но беда, окно не хочет срабатывать в firefox.
                                                                                                                                                                                                                  Посмотрите пожалуйста, что я неправильно сделала
                                                                                                                                                                                                                  lyguta.inf.ua
                                                                                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                                                                                    Вы что-то сильно перемудрили с элементами.
                                                                                                                                                                                                                    Не надо в элемент button помещать a.
                                                                                                                                                                                                                    <button id="submit-btn"><a href="#" data-toggle="modal" data-target="#myModal">CallBack</a></button>
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    Используйте 1 элемент: a или button.
                                                                                                                                                                                                                    Например, button:
                                                                                                                                                                                                                    <button id="submit-btn" data-toggle="modal" data-target="#myModal">CallBack</button>
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    1. Ксюша # 0
                                                                                                                                                                                                                      Заработало!!! Спасибо огромное!!!
                                                                                                                                                                                                                  2. Александр # 0
                                                                                                                                                                                                                    Одно и то же модальное окно на десктопах нормально сразу открывается по клику, а на айпаде открывается только после второго клика по ссылке. И потом на айпаде либо сразу же закрывается само, либо его вообще никак не закрыть без перезагрузки страницы. В какую сторону копать?
                                                                                                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                                                                                                      Попробуйте обновиться на самую последнию версию Bootstrap (3.3.7).
                                                                                                                                                                                                                    2. Андрей # 0
                                                                                                                                                                                                                      Здравствуйте, подскажите, можно сделать что бы еще к этому коду окно открывалось только по субботам и воскресеньям и при заходе на сайт из задержкой в 5 мин. Спасибо

                                                                                                                                                                                                                      <script>
                                                                                                                                                                                                                      // 1 час = 1000мс*60сек*60мин = 3600000 мс
                                                                                                                                                                                                                      $(function() {
                                                                                                                                                                                                                        // получить значение даты из LocalStorage
                                                                                                                                                                                                                        var dateModalShow = localStorage.getItem("dateModalShow");
                                                                                                                                                                                                                        // получить значение текущей даты
                                                                                                                                                                                                                        var currentDate = new Date().toString();
                                                                                                                                                                                                                        // если значение даты в LocalStorage равно null или
                                                                                                                                                                                                                        // не равно текущей даты 
                                                                                                                                                                                                                        // (т.е. если модальное окно сегодня не показывалось, то)
                                                                                                                                                                                                                        if (dateModalShow=null || (((((new Date(currentDate)).getTime())- ((new Date(dateModalShow)).getTime()))/3600000)>5) ) {  
                                                                                                                                                                                                                          // открываем модальное окно
                                                                                                                                                                                                                          $("#myModal").modal('show');
                                                                                                                                                                                                                          // сохраняем дату открытия модального окна в LocalStorage
                                                                                                                                                                                                                          localStorage.setItem("dateModalShow", currentDate);
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                      });
                                                                                                                                                                                                                      </script>
                                                                                                                                                                                                                      
                                                                                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                                                                                        Будет так:
                                                                                                                                                                                                                        $(function() {
                                                                                                                                                                                                                          // получить значение даты из LocalStorage
                                                                                                                                                                                                                          var dateModalShow = localStorage.getItem("dateModalShow");
                                                                                                                                                                                                                          // получить значение текущей даты
                                                                                                                                                                                                                          var currentDate = new Date().toString();
                                                                                                                                                                                                                          // сколько суток прошло с прошлого показа
                                                                                                                                                                                                                          var period = (((new Date(currentDate)).getTime())- ((new Date(dateModalShow)).getTime()))/(1000*60*60*24);
                                                                                                                                                                                                                          // если окно не показывалось или с момента прошлого показа прошли сутки и сегодня суббота (или воскресенье), то
                                                                                                                                                                                                                          if ( ((dateModalShow==null) || (period>1)) && ((currentDate.getDay==6) || (currentDate.getDay==0)) ) {
                                                                                                                                                                                                                            // запустить таймер, который запустит содержимое функции через 5 минут
                                                                                                                                                                                                                            setTimeout(function(){
                                                                                                                                                                                                                              $("#myModal").modal('show');
                                                                                                                                                                                                                              localStorage.setItem("dateModalShow", currentDate);
                                                                                                                                                                                                                            },300000);
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                        });
                                                                                                                                                                                                                        
                                                                                                                                                                                                                      2. Игорь # 0
                                                                                                                                                                                                                        Здравствуйте
                                                                                                                                                                                                                        Вопрос нестандартный — можно ли управлять отображением модального окна через адресную строку?
                                                                                                                                                                                                                        то есть
                                                                                                                                                                                                                        К примеру есть site.ru
                                                                                                                                                                                                                        и 2 окна — #modal1 #modal2
                                                                                                                                                                                                                        чтобы к примеру зайдя на site.ru/?q=#modal1 сайт открылся с уже показанным окном #modal1
                                                                                                                                                                                                                        1. Александр Мальцев # 0
                                                                                                                                                                                                                          Здравствуйте. Конечно можно.
                                                                                                                                                                                                                          Используйте в JavaScript функцию для получения GET-параметров:
                                                                                                                                                                                                                          var queryString = function () {
                                                                                                                                                                                                                            var query_string = {};
                                                                                                                                                                                                                            var query = window.location.search.substring(1);
                                                                                                                                                                                                                            var vars = query.split("&");
                                                                                                                                                                                                                            for (var i=0;i<vars.length;i++) {
                                                                                                                                                                                                                              var pair = vars[i].split("=");
                                                                                                                                                                                                                              if (typeof query_string[pair[0]] === "undefined") {
                                                                                                                                                                                                                                query_string[pair[0]] = decodeURIComponent(pair[1]);
                                                                                                                                                                                                                              } else if (typeof query_string[pair[0]] === "string") {
                                                                                                                                                                                                                                var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
                                                                                                                                                                                                                                query_string[pair[0]] = arr;
                                                                                                                                                                                                                              } else {
                                                                                                                                                                                                                                query_string[pair[0]].push(decodeURIComponent(pair[1]));
                                                                                                                                                                                                                              }
                                                                                                                                                                                                                            } 
                                                                                                                                                                                                                            return query_string;
                                                                                                                                                                                                                          }();
                                                                                                                                                                                                                          
                                                                                                                                                                                                                          После этого в коде определяйте есть ли необходимый параметр в URL и открывайте необходимое модальное окно:
                                                                                                                                                                                                                          if (queryString.q='modal1' || queryString.q='modal2') {
                                                                                                                                                                                                                            $('#'+queryString.q).modal('show');
                                                                                                                                                                                                                          }
                                                                                                                                                                                                                          
                                                                                                                                                                                                                          site.ru/?q=modal1 // открывает 1 модальное окно
                                                                                                                                                                                                                          site.ru/?q=modal2 // открывает 2 модальное окно
                                                                                                                                                                                                                          1. Игорь # 0
                                                                                                                                                                                                                            Спасибо огромное!
                                                                                                                                                                                                                        2. ToItchief # 0
                                                                                                                                                                                                                          Добрый день, подскажите пожалуйста как сделать, никак не могу понять в чем дело.
                                                                                                                                                                                                                          У меня модальное окно, в котором форма где прописан " action=«mail.php» ", но при нажатии на кнопку «Получить» ничего не происходит, как сделать что бы с модального окна при нажатии на кнопку «Получить» перекидывало на файл «mail.php»? или данные отправлялись на серевер(почту) с помощью ajax, я только учусь и не силен в этом поэтому прошу помощи и буду очень благодарным за помощь!
                                                                                                                                                                                                                          <!-- Modal -->
                                                                                                                                                                                                                          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                                                                                                                                                                                            <div class="modal-dialog" role="document">
                                                                                                                                                                                                                              <div class="modal-content">
                                                                                                                                                                                                                                <div class="modal-header">
                                                                                                                                                                                                                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                                                                                                                                                                                                  <h4 class="modal-title" id="myModalLabel">Получить скидку 50% на лечебный массаж</h4>
                                                                                                                                                                                                                                  <p class="modal-paragraph" >Скидка вам придет на Е-mail</p>
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                <div class="modal-body">
                                                                                                                                                                                                                                  <form method="post" id="formmodal" action="mail.php">
                                                                                                                                                                                                                                  	<input type="text" class="input-fields" name="name" placeholder="Ваше имя" required>
                                                                                                                                                                                                                                  	<input type="email" class="input-fields" name="email" placeholder="Ваш Email" required>
                                                                                                                                                                                                                                  	<button type="button" class="input-fields-button">Получить</button> 
                                                                                                                                                                                                                                  </form>
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                          </div> 
                                                                                                                                                                                                                          
                                                                                                                                                                                                                          1. ToItchief # 0
                                                                                                                                                                                                                            Уже разобрался
                                                                                                                                                                                                                            нужно поменять
                                                                                                                                                                                                                            <button type="button" class="input-fields-button">Получить</button> 
                                                                                                                                                                                                                            на
                                                                                                                                                                                                                            <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
                                                                                                                                                                                                                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                                                                                                                                                                                              <div class="modal-dialog" role="document">
                                                                                                                                                                                                                                <div class="modal-content">
                                                                                                                                                                                                                                  <div class="modal-header">
                                                                                                                                                                                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                                                                                                                                                                                                    <h4 class="modal-title" id="myModalLabel">Получить скидку 50% на лечебный массаж</h4>
                                                                                                                                                                                                                                    <p class="modal-paragraph" >Скидка вам придет на Е-mail</p>
                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                  <div class="modal-body">
                                                                                                                                                                                                                                    <form method="post" id="formmodal" action="mail.php">
                                                                                                                                                                                                                                    	<input type="text" class="input-fields" name="name" placeholder="Ваше имя" required>
                                                                                                                                                                                                                                    	<input type="email" class="input-fields" name="email" placeholder="Ваш Email" required>
                                                                                                                                                                                                                                    	<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
                                                                                                                                                                                                                                    </form>
                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                            
                                                                                                                                                                                                                          2. Антон # 0
                                                                                                                                                                                                                            Добрый день!
                                                                                                                                                                                                                            Скажите вот вы тут настрочили код для кнопки и модального окна все так прекрасно и клево!!!
                                                                                                                                                                                                                            прописали стили.
                                                                                                                                                                                                                            Вопрос где стили????????? Для ваших окон и кнопок.
                                                                                                                                                                                                                            Искать в файловых кодах что куда и как как то не прикольно, еще куда не шло если бы ваш общий css был по полкам а не в одну строку
                                                                                                                                                                                                                            Просьба выложить отдельно файл со стилями для кнопки и для формы модального окна спасибо. Жду с не терпением.
                                                                                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                                                                                              Здравствуйте.
                                                                                                                                                                                                                              Это кнопка и модальное окно фреймворка Bootstrap. Если вам нужны не только эти элементы, а весь набор данной платформы, то скачайте её. Информацию о том как это сделать, можно почитать в этой статье Установка платформы Twitter Bootstrap.

                                                                                                                                                                                                                              Если вам нужны только эти конкретные элементы, то перейдите на страницу _http://getbootstrap.com/customize/ и выберите только нужные. Потом пролистайте данную страницу вниз, нажмите кнопку и получите платформу, состоящую только из этих компонентов. Если Вам необходимо выдернуть эти стили, то откройте файл bootstrap.css (не сжатый) и скопируете необходимые строчки в свой файл стилей. Он кроме кнопок, будет содержать ещё и базовые стили. Если они вам не нужны, то прокрутите содержимое файла до кнопок и скопируйте их. То же самое необходимо выполнить и для модального окна. Приводить содержимое CSS не буду, т.к. надеюсь, что довольно подробно описал, что надо сделать. Для работы модального окна необходим ещё код javascript, он находится в несжатом виде в файле bootstrap.js. Можете тоже его просто скопировать себе в свой файл скриптов или подключить так.
                                                                                                                                                                                                                            2. Леонид # 0
                                                                                                                                                                                                                              Подскажите, а можно ли как то вызвать модальное окно ссылкой?
                                                                                                                                                                                                                              Например добавив к адресу "#modal" или как то еще?
                                                                                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                                                                                В статье есть такой пример (где myModal — id модального окна, которое необходимо открыть):
                                                                                                                                                                                                                                <!-- Кнопка, вызывающее модальное окно -->
                                                                                                                                                                                                                                <a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>
                                                                                                                                                                                                                                
                                                                                                                                                                                                                                Если необходимо это сделать после перехода на страницу, то надо написать скрипт:
                                                                                                                                                                                                                                $(function(){
                                                                                                                                                                                                                                  if (location.hash == '#modal') {
                                                                                                                                                                                                                                    $('#modal').modal('show');
                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                
                                                                                                                                                                                                                                Т.е. получить хэш страницы и сравнить его с #modal. Если он равен, то открыть модальное окно.
                                                                                                                                                                                                                              2. max # 0
                                                                                                                                                                                                                                Добрый Вечер! Надеюсь, вы сможете мне помочь. Можно ли как-то отменить прокрутку к кнопке, которая открыла модалку? Даже на ваших примерах прокрутка есть. Заранее спасибо!
                                                                                                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                                                                                                  Можете более подробно пояснить или приложить изображения. А то не совсем понятно о чём идеть речь…
                                                                                                                                                                                                                                2. max # 0
                                                                                                                                                                                                                                  P.S. Прокрутка происходит после закрытия модалки.
                                                                                                                                                                                                                                  1. max # 0
                                                                                                                                                                                                                                    Большое спасибо что ответили!
                                                                                                                                                                                                                                    1. max # 0
                                                                                                                                                                                                                                      Есть форма (очень длинная на страницу не помещается) в которой происходит валидация, и возможность предварительного просмотра контента, который ввел пользователь, превью выводится модалкой. В самой модалке есть кнопка отправить, если пользователь не заполнил поле, страница прокручивается к этому полю, но затем опять прыгает вниз к кнопке вызывающей модалку.
                                                                                                                                                                                                                                      1. max # 0
                                                                                                                                                                                                                                        Для примера:
                                                                                                                                                                                                                                        Прокручиваю кнопку вот в такое положение…

                                                                                                                                                                                                                                        Нажимаю появляется модалка

                                                                                                                                                                                                                                        Закрываю модалку страница прокрутилась

                                                                                                                                                                                                                                        Тоже происходит и у меня только в больших масштабах…
                                                                                                                                                                                                                                        1. max # 0
                                                                                                                                                                                                                                          Получается, что после закрытия модалки, кнопка всегда возвращается в область просмотра (видимости) как это отменить..?
                                                                                                                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                                                                                                                            Это стандартное поведение модального окна для устройств с клавиатурой. Т.е. Bootstrap устанавливает фокус (focus) на элемент (кнопку), которая вызвала модальное окно. Это происходит только в том случае, если она (эта кнопка) имеет атрибут data-toggle со значением modal.

                                                                                                                                                                                                                                            Наиболее простой способ этого избежать — это отказаться от атрибута data-toggle. Т.е. открывать модальное окно с помощью JavaScript. В этом случае он не сможет обратиться к элементу, имеющему атрибут data-toggle со значением modal.
                                                                                                                                                                                                                                            Т.е. следующим способом:
                                                                                                                                                                                                                                            <!-- Модальное окно -->
                                                                                                                                                                                                                                            <div id="myModal" class="modal fade">
                                                                                                                                                                                                                                              <!-- Содержимое модального окна -->
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                            <!-- Кнопка, открывающее модальное окно (без атрибута data-toggle="modal") -->
                                                                                                                                                                                                                                            <a id="button" href="#myModal" class="btn btn-primary">Открыть модальное окно</a>  
                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                            <!-- Скрипт, открывающий модальное окно -->
                                                                                                                                                                                                                                            <script>
                                                                                                                                                                                                                                            $('#button').click(function(){
                                                                                                                                                                                                                                              $('#myModal').modal('show');
                                                                                                                                                                                                                                            });
                                                                                                                                                                                                                                            </script>
                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                          2. Евгений # 0
                                                                                                                                                                                                                                            Добрый день, есть блок с 2 ссылками, при нажатии на одну из них должен появляться блок такойже ширины и высоты, но должен заменять собой блок с 2ссылками, тоесть он не должен быть отдельным окном, никак не могу победить эту часть…
                                                                                                                                                                                                                                            1. Александр Мальцев # 0
                                                                                                                                                                                                                                              Здравствуйте.
                                                                                                                                                                                                                                              Можно сделать так (используя относительное и абсолютное позиционирование).
                                                                                                                                                                                                                                              Код HTML:
                                                                                                                                                                                                                                              <div id="mydiv" style="position: relative">
                                                                                                                                                                                                                                                <!-- Исходный блок -->
                                                                                                                                                                                                                                                <div id="mydiv-1" style="background-color: pink;">
                                                                                                                                                                                                                                                  <a id="link-1" href="#">1</a>
                                                                                                                                                                                                                                                  <a id="link-2" href="#">2</a>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                <!-- Блок, на который необходимо изменить -->
                                                                                                                                                                                                                                                <div id="mydiv-2" style="background-color: blue; display: none; position: absolute; top: 0; bottom: 0px; left: 0px; right: 0px;"></div>
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                              Код JavaScript:
                                                                                                                                                                                                                                              <script>
                                                                                                                                                                                                                                                $('#link-1').click(function(e){
                                                                                                                                                                                                                                                   e.preventDefault;
                                                                                                                                                                                                                                                   $('#mydiv').css({
                                                                                                                                                                                                                                                     'height': $('#mydiv').height(),
                                                                                                                                                                                                                                                   });
                                                                                                                                                                                                                                                   $('#mydiv-1').hide();
                                                                                                                                                                                                                                                   $('#mydiv-2').show();
                                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                              </script>
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                            2. Larisa # 0
                                                                                                                                                                                                                                              здравствуйте, Александр) подключаю к странице плагин, который применяется к изображению. неприятность в том, что изображение обязательно должно открываться в модальном окне. и в таком случае плагин не работает. пробую уже модалку открывать через js и там же при открытии инициализировать мой плагин — не работает все равно. подскажите, пожалуйста, что может быть не так…
                                                                                                                                                                                                                                                <!-- Modal Image File -->
                                                                                                                                                                                                                                                <div class="modal fade" id="imageFile" aria-hidden="true" aria-labelledby="imageFile" role="document" tabindex="-1">
                                                                                                                                                                                                                                                  <div class="modal-dialog">
                                                                                                                                                                                                                                                    <div class="modal-content">
                                                                                                                                                                                                                                                      <div class="modal-header">
                                                                                                                                                                                                                                                        <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                                                                                                                                                                                                                                                        <h4 class="modal-title">Редактировать изображение</h4>
                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                      <div class="modal-body">
                                                                                                                                                                                                                                                        <div id="imgdiv" style="text-align: center">
                                                                                                                                                                                                                                                          <img class="img-responsive" id="image" src="assets/images/test_image.jpg">
                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                          <button id="toggleEdit">Edit</button> <button id="export">Export</button>
                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                        <div id=txt></div>
                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                      <div class="modal-footer text-right">
                                                                                                                                                                                                                                                        <button class="btn btn-primary" data-dismiss="modal" type="button">Добавить</button>
                                                                                                                                                                                                                                                        <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Отменить</a>
                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                <!-- End Modal Image File -->
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                              <script>
                                                                                                                                                                                                                                                  $(document).ready(function(){
                                                                                                                                                                                                                                                    $("#imageFileBtn").click(function() {
                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                      $("#imageFile").modal('show'); // инициализация модали
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                          // BEGIN imgNotes
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                          var $img = $("#image").imgNotes();
                                                                                                                                                                                                                                                          $img.imgNotes("import", [ {x: "0.5", y:"0.5", note:"AFL Grand Final Trophy"}, 
                                                                                                                                                                                                                                                                        {x: "0.322", y:"0.269", note: "Brisbane Lions Flag"},
                                                                                                                                                                                                                                                                        {x: "0.824", y: "0.593", note: "Fluffy microphone"}]);
                                                                                                                                                                                                                                                          var $toggle = $("#toggleEdit");
                                                                                                                                                                                                                                                          if ($img.imgNotes("option","canEdit")) {
                                                                                                                                                                                                                                                            $toggle.text("View");
                                                                                                                                                                                                                                                          } else {
                                                                                                                                                                                                                                                            $toggle.text("Edit");
                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                          $toggle.on("click", function() {
                                                                                                                                                                                                                                                                        var $this = $(this);
                                                                                                                                                                                                                                                                        if ($this.text()=="Edit") {
                                                                                                                                                                                                                                                                          $this.text("View");
                                                                                                                                                                                                                                                                          $img.imgNotes("option", "canEdit", true);
                                                                                                                                                                                                                                                                        } else {
                                                                                                                                                                                                                                                                          $this.text('Edit');
                                                                                                                                                                                                                                                                          $img.imgNotes('option', 'canEdit', false);
                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                          });
                                                                                                                                                                                                                                                          var $export = $("#export");
                                                                                                                                                                                                                                                          $export.on("click", function() {
                                                                                                                                                                                                                                                                        var $table = $("<table/>").addClass("gridtable");
                                                                                                                                                                                                                                                                        var notes = $img.imgNotes('export');
                                                                                                                                                                                                                                                                        $table.append("<th>X</th><th>Y</th><th>NOTE</th>"); 
                                                                                                                                                                                                                                                                        $.each(notes, function(index, item) {
                                                                                                                                                                                                                                                                          $table.append("<tr><td>" + item.x + "</td><td>" + item.y + "</td><td>" + item.note + "</td></tr>");
                                                                                                                                                                                                                                                                        });
                                                                                                                                                                                                                                                                        $('#txt').html($table);
                                                                                                                                                                                                                                                          });
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                          // END imgNotes
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                  });
                                                                                                                                                                                                                                                  </script>
                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                                                                                                Если вы используете плагины Bootstrap с другими UI фреймворками, то у вас могут возникнуть конфликты пространства имён. Чтобы этого избежать необходимо использовать плагин .noConflict.
                                                                                                                                                                                                                                                1. Для этого необходимо плагин Bootstrap (поместить в конец, т.е. после других плагинов jQuery)
                                                                                                                                                                                                                                                2. Написать скрипт (например, для модального окна)
                                                                                                                                                                                                                                                <script>
                                                                                                                                                                                                                                                var bootstrapModal = $.fn.modal.noConflict();
                                                                                                                                                                                                                                                $.fn.bsModal = bootstrapModal;
                                                                                                                                                                                                                                                </script>
                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                3. После этого инициализация модального окна будет осуществляться следующим образом (т.е. не modal, а bsModal):
                                                                                                                                                                                                                                                $("#imageFile").bsModal('show');
                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                1. Larisa # 0
                                                                                                                                                                                                                                                  большое спасибо)

                                                                                                                                                                                                                                              Вы должны авторизоваться, чтобы оставлять комментарии.