Bootstrap Modal - Компонент для создания модальных окон

Александр Мальцев
303K
3
Bootstrap Modal - Компонент для создания модальных окон
Содержание:
  1. Назначение компонента Modal
  2. Создание модального окна
  3. Параметры модального окна
  4. Метод JavaScript modal() для активации и управления модальным окном
  5. События, связанные с модальным окном
  6. Комментарии

В этой статье рассмотрим Bootstrap компонент Modal. Этот компонент используется для создания на сайте модальных окон. Разберём как с ним работать в третьей и четвёртой версии этого фреймворка.

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

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

Изображение модального окна в Bootstrap

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

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

Что нужно знать перед тем, как переходить к созданию модальных окон?

  • Модальные окна построены с использованием HTML, CSS и JavaScript. Они визуально располагаются над всем остальным содержимым документа и убирают из него прокрутку. Теперь прокрутка работает не по <body>, а по содержимому модального окна.
  • Нажатие на область страницы вне модального окна автоматически приведёт его к закрытию.
  • Bootstrap позволяет отображать в некоторый момент времени только одно модальное окно. Вложенные модальные окна не поддерживаются, т.е. у вас на странице не могут быть открыты сразу несколько окон одновременно.
  • Рекомендация к размещению разметки (HTML кода) модального окна. Позиционирование модального окна осуществляется через position: fixed. Этот способ позиционирования имеет некоторые особенности при отрисовке. Поэтому верстку модального окна желательно располагать, когда это возможно, непосредственно в элементе <body> или как можно ближе к нему по иерархии. Это действие позволит избежать влияния на него других элементов. Например, вы можете столкнутся с проблемами, если .modal поместите внутрь другого фиксированного элемента.
  • Использование на мобильных устройствах. В некоторых старых версиях браузеров на мобильных устройствах (iOS и Android) имеется ошибка. Он связана с тем, что при прокручивании содержимого модального окна вверх или вниз, прокручивается также содержимое элемента <body>. Происходило это из-за того, что поддержка overflow: hidden на <body> в этих версиях браузеров была весьма ограниченной.
Модальному окну 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

Как организовать переключение между 2 модальными окнами

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

JavaScript сценарий, который необходимо добавить на страницу, после подключения библиотеки jQuery и boostrap.min.js.

<script>
$(function(){

// #modal_1 - селектор 1 модального окна
// #modal_2 - селектор 2 модального окна, которое необходимо открыть из первого
var two_modal = function(id_modal_1,id_modal_2) {
  // определяет, необходимо ли при закрытии текущего модального окна открыть другое
  var show_modal_2 = false;
  // при нажатии на ссылку, содержащей в качестве href селектор модального окна
  $('a[href="' + id_modal_2 + '"]').click(function(e) {
    e.preventDefault();
    show_modal_2 = true;
    // скрыть текущее модальное окно
    $(id_modal_1).modal('hide');
  });
  // при скрытии текущего модального окна открыть другое, если значение переменной show_modal_2 равно true
  $(id_modal_1).on('hidden.bs.modal', function (e) {
    if (show_modal_2) {
      show_modal_2 = false;
      $(id_modal_2).modal('show');
    }
  })

}('#modal_1','#modal_2');

});
</script>

Пример HTML-кода, состоящего из 2 модальных окон:

<!-- Модальное окно 1 -->
<div class="modal fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
  <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="modalLabel1">Заголовок модального окна 1</h4>
      </div>
      <div class="modal-body">
        <!-- Содержимое модального окна 1 -->
        <a href="#modal_2">Открыть 2 модальное окно</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>


<!-- Модальное окно 2 -->
<div class="modal fade" id="modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
  <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="modalLabel1">Заголовок модального окна 2</h4>
      </div>
      <div class="modal-body">
        <!-- Содержимое модального окна 2 -->
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Пример переключения между двумя модальными окнами можно посмотреть в песочнице.

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

  1. Анатолий
    7 часов назад
    Здравствуйте. Возникла проблема со взаимодействием табов и модального окна

    У меня кнопка вызова модульного окна и само модальное окно находятся в табе.

    Проблема в том, что при вызове модального окна с активного (текущего) таба class=«tab-pane active» удаляется класс active а мне это совершенно не желательно.

    Подскажите, как с этим побороться?
    1. Анатолий
      6 часов назад
      Да и ещё заметил. То же самое происходит и при закрытии модального окна. Т.е., после открытия модального окна, я, через инструменты разработчика, вписал active вручную, после закрытия модального окна active опять удалился.
      Мне это не нужно. таб должен оставаться открытым независимо от модальных окон.
      1. Александр Мальцев
        26 минут назад
        Привет! Не знаю с чем это связано. Если создать такой пример, то всё отлично отрабатывает. Модальное окно находится на второй вкладке.
        1. Анатолий
          20 минут назад
          Я разобрался. Проблема была не связанна с бутстрап. У меня мобильное меню стояло и оно скриптом активировалось тоже через класс active. В скрипте и стилях меню переименовал на другой класс и проблема ушла. Всё равно спасибо вам. У вас очень полезный сайт.
          1. Александр Мальцев
            10 минут назад
            Отлично, что получилось! Рад, что сайт полезен.
    2. Andry
      14 марта 2021, 18:16
      Доброго времени суток! Очень долго мучаюсь над проблемой… не работает модальное окно, можете помочь советом?)
      <!DOCTYPE html>
      <html lang="ru">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1">
      	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
      	<title>Strahova</title>
      	<link rel="stylesheet" href="css/style.css">
      	<link rel="preconnect" href="https://fonts.gstatic.com">
      	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
      </head>
      <body>
      <button id="#myModal" class="btn btn-primary" data-toggle="modal" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <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>
        
      
      <script>
      	$(document).ready(function(){
      	  //при нажатию на любую кнопку, имеющую класс .btn
      	  $(".btn").click(function() {
      		//открыть модальное окно с id="myModal"
      		$("#myModal").modal('show');
      	  });
      	});
      	</script>
      
      	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
      	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
      	<script src="js/control-modal.min.js"></script>
      
      	<script>
      		$(function () {
      			var myModal = new ModalApp.ModalProcess({id: 'myModal', title: 'Информация о контенте'});
      			myModal.init();
      			$('.modal-show').click(function () {
      				myModal.changeBody($(this).attr('data-content'));
      				myModal.showModal();
      			});
      		});
      	</script>
      
      
      </body>
      </html>
      1. Julya
        27 февраля 2021, 16:24
        Подскажите, пожалуйста, как на Бустрапе сделать такое: у меня есть таблица, допустим на 5 колонок. Самая правая колонка — это кнопка «Редактировать», при нажатии на эту кнопку модалка открывается и там четыре поля были предзаполнены текстом, который соответствовал строке, в которой кнопка эта находится. Было вот такое:

        Компонент
        <input type=«text» class=«form-control» th:name=«componentName» th:value="${incident.getComponentName()}" id=«componentName»>


        Но текст был большим и пришлось поменять на <textarea class=«form-control», из-за этого пропало предзаполнение. Подскажите, пожалуйста, как исправить? Или можно вернуть как было, но расширить поле ввода текста, главное чтобы при открытии модалки текст полей был и само поле для ввода не мизерное :(
        1. Julia
          22 февраля 2021, 20:56
          Можно каким-то образом управлять скоростью появления модального окна?
          1. Александр Мальцев
            23 февраля 2021, 14:55
            Можно посредством CSS. По умолчанию CSS переход выполняется 0.3s. Если нужна иная скорость, то установите вместо этого значения другое:
            .modal.fade .modal-dialog {
              transition: -webkit-transform 0.3s ease-out;
              transition: transform 0.3s ease-out;
              transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
            }
            
          2. Алексей
            07 января 2021, 17:04
            Добрый день, подскажите каким образом реализовать, главная страница представлена в виде лендинга, на ней размещено множество модальных окон с содержимым, как сделать прямую ссылку на уже открытое модальное окно с содержимым для пользователей, т.к хочу чтобы содержимым модального окна делились через соцсети посредством кнопок шаринга.
            <!-- вызов модального окна 1 -->
            <div class="col-md-6 col-0-gutter">
              <div class="ot-portfolio-item">
                <figure class="effect-bubba">
                  <img src="images/demo/portfolio-1.jpg" alt="Распродажа" class="img-responsive" />
                  <figcaption>
                    <h2>Распродажа</h2>
                    <p>Распродажа</p>
                    <a href="#" data-toggle="modal" data-target="#Modal-1">Подробнее</a>
                  </figcaption>
                </figure>
              </div>
            </div>
            <!-- вызов модального окна 1 -->
            
            <!-- Содержимое модального окна 1 -->
            <div class="modal fade" id="Modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1">
              <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="Modal-label-1">Уникальное предложение</h4>
                  </div>
                  <div class="modal-body">
                    <img src="images/demo/img-1.jpg" alt="Уникальное предложение" class="img-responsive" />
                    <div class="modal-works"><span>Уникальное предложение</span></div>
                    <center><a href="#" target="_blank" rel="nofollow" class="btn btn-primary" role="button" aria-pressed="true">Купить</a></center>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Содержимое модального окна 1 -->
            1. Александр Мальцев
              09 января 2021, 04:35
              Привет!
              Можно просто добавлять hash к URL при открытии модального окна:
              // добавим к location хэш при открытии модального окна
              $('.modal').on('show.bs.modal', function (e) {
                location.hash = e.target.id;
              });
              // удалим хеш при закрытии модального окна
              $('.modal').on('hidden.bs.modal', function (e) {
                history.replaceState(null, null, ' ');
              });
              
              Для открытия модального окна сразу после загрузки страницы, если в URL присутствует хеш, можно осуществить просто добавив после JavaScript кода приведённого следующего ещё следующий:
              const $target = $(location.hash);
              if ($target.length) {
                if ($target.hasClass('modal')) {
                  $target.modal('show');
                }
              }
              
              Для share кнопок чтобы передавать вместе с URL хеш, его тоже нужно добавить.
            2. Вячеслав
              03 января 2021, 14:23
              Добрый день! При вызове модального окна Бутстрап 4 в браузерах Яндекс и Хром постоянно вылазит ошибка
              index.js:63 Uncaught TypeError: Cannot read property 'nodeName' of null
                  at _e (index.js:63)
                  at MutationObserver.<anonymous> (index.js:63)
              
              А в Edge такой ошибки нет. Как исправить?
              1. Александр Мальцев
                03 января 2021, 15:23
                Добрый день! Сложно подсказать, не зная кода. Посмотрите, что у вас на строчке 63 в файле «index.js» и попробуйте разобраться из-за чего она возникает. А также попробуйте поместить ваш скрипт после всех элементов на странице (перед закрывающим тегом body) и проверьте вашу разметку с помощью валидатора w3c.
                1. Вячеслав
                  03 января 2021, 15:43
                  Да в том то и дело, что Яндекс и Хром его сами вставляют. Даже на Вашем сайте эта ошибка висит
                  1. Александр Мальцев
                    03 января 2021, 15:53
                    Это скорее всего у вас из-за каких-то установленных расширений в браузере, попробуйте их все отключить и после этого проверить ещё раз. На этом сайте файла «index.js» вообще нет.
              2. Вячеслав
                03 января 2021, 14:06
                Добрый день! Столкнулся с такой проблемой. При вызове модального окна Бутстрап 4 в браузерах Яндекс и Хром постоянно появляется ошибка в index.js. В Edge такой проблемы нет.
                index.js:63 Uncaught TypeError: Cannot read property 'nodeName' of null
                    at _e (index.js:63)
                    at MutationObserver.<anonymous> (index.js:63)
                _e @ index.js:63
                (anonymous) @ index.js:63
                
                1. David
                  04 августа 2020, 00:19
                  я извиняюсь. все получилось вместо id=«btn4» использовал data-toggle=«modal» и теперь отлично. вы супер
                  1. Юрий Борщев
                    16 июля 2020, 23:53
                    Прошу помощи со следующим вопросом.
                    В модальном окне бутстрап располагаю как бы стандартную форму для добавления новой записи в БД. Все поля формы передаются по клику на кнопке «button» в js и дальше через ajax в другой файл php, где происходит их проверка и, собственно, запись в БД. Все отрабатывает хорошо, за исключением одного — одно из необходимых полей, это textarea, к которому подключается ckeditor 4. Скрипт ckeditor прописан здесь же в окне, непосредственно после поля textarea. На обычных страницах все отрабатывает «на ура», а при попытке получить в переменную значение из editor-a, расположенного в модальном окне, попросту ничего не передается, хотя сам editor отображается в окне корректно. Как получить значение из него???
                    1. Юрий Борщев
                      17 июля 2020, 21:26
                      Вопрос снят
                    2. Виктор
                      20 мая 2020, 11:27
                      Подскажите, пожалуйста, как сделать с использованием bootstrap 4 модальное окно растянутое на всю высоту и прижатое к правому краю с анимацией появления с права?
                      1. Sergey
                        13 февраля 2020, 07:39
                        Александр, аналогичная ситуация, но решение иное, очевидно!
                        кнопка
                        a.btn.btn-xs.btn-success.pull-right {
                        	background-color:#8e6c62;
                        	font:normal 170% 'century gothic', arial, sans-serif;
                        	font-size:100%;
                        	color:black;
                        }
                        <code>
                        подсвечивается синим цветом, хочу его поменять.
                        применяю
                         <code>
                        a.btn.btn-xs.btn-success.pull-right:focus {
                        	color:white !important;
                        }
                        <code>
                        
                        не реагирует. Какой-то фокус ссылки...Как правильно сформировать запрос, в этом случае? СПАСИБО
                        1. Александр Мальцев
                          13 февраля 2020, 08:52
                          Это для состояния focus, если нужен hover (при поднесении курсора), то замени на него:
                          a.btn.btn-xs.btn-success.pull-right:hover {
                            color:white !important;
                          }
                          <code>
                          1. Sergey
                            13 февраля 2020, 09:02
                            после нажатия на кнопку, она берется в синею рамочку. но
                            этот код
                            a.btn.btn-xs.btn-success.pull-right:focus {
                            	color:white !important;
                            }
                            <code>
                            не изменяют ее поведение. 
                            
                            Нужно, чтобы рамочка была прозрачная после нажатия или в цвет кнопки. 
                            
                            Спасибо. 
                            1. Александр Мальцев
                              13 февраля 2020, 14:07
                              Нужно убрать тень, а не менять цвет текста:
                              a.btn.btn-xs.btn-success.pull-right:focus {
                                box-shadow: none !important;
                              }
                              
                              1. Sergey
                                14 февраля 2020, 09:21
                                Александр, не решилась задача.
                                стили СSS
                                .btn.btn-xs.btn-success.pull-right {
                                	background-color:#8e6c62;
                                	font:normal 170% 'century gothic', arial, sans-serif;
                                	font-size:100%;
                                	color:black;
                                	margin-right:3%;
                                }
                                
                                .btn.btn-xs.btn-success.pull-right:hover {
                                	color:white;
                                }
                                
                                .btn.btn-xs.btn-success.pull-right:focus {
                                  box-shadow: none !important;
                                }
                                
                                первые два работают стиля, третий подсветку после нажатия не убрал (с ним или без него — отображение кнопки одинаково)!

                                Существует ли какая программа/приложения, что может полностью отобразить всю структуру HTML и стилей CSS? В инструментах разработчика я не могу найти это свойство кнопки (если так ведет себя кнопка, где-то это прописано)!

                                СПАСИБО, возьму на заметку еще и это свойство.
                                1. Александр Мальцев
                                  14 февраля 2020, 14:20
                                  Попробуй так:
                                  .btn.btn-xs.btn-success.pull-right:focus,
                                  .btn.btn-xs.btn-success.pull-right.focus,
                                  .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled):active,
                                  .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled).active,
                                  .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled):active:focus,
                                  .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled).active:focus {
                                    box-shadow: none !important;
                                  }
                                  
                                  1. Sergey
                                    21 февраля 2020, 21:52
                                    Здравствуйте, Александр.
                                    Думаю, будет интересно.

                                    МНЕ ПОМОГЛО «подсветку кнопок убрать:
                                    * {
                                      outline: 0 !important;
                                    }
                                    
                                    
                                    1. Sergey
                                      14 февраля 2020, 14:37
                                      Александр, спасибо за помощь.
                                      не помогло. Возможно я неправильно называю вещи!
                                      фото окна после клика по поповеру!



                                      это не критично, но для себя было бы интересно и познавательно понимать!

                                      Спасибо еще раз и хорошего дня!
                                      1. Александр Мальцев
                                        14 февраля 2020, 14:53
                                        Тогда так:
                                        .btn.btn-xs.btn-success.pull-right:focus,
                                        .btn.btn-xs.btn-success.pull-right.focus,
                                        .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled):active,
                                        .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled).active,
                                        .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled):active:focus,
                                        .btn.btn-xs.btn-success.pull-right:not(:disabled):not(.disabled).active:focus {
                                          box-shadow: none !important;
                                          border-color: transparent !important;
                                        }
                                        1. Sergey
                                          14 февраля 2020, 23:31
                                          Спасибо, Александр за помощь.
                                          Тоже, ничего не поменялось. Пробовал в разных браузерах, работаю в хроме, в опере — тоже самое, експлорер вообще поповер не отображает, а рамочка пунктиром взялась! Завтра еще все пересмотрю.
                                          Бывали случаи, когда нахожу атрибут в панели разработчика — меняю параметр, смотрю изменения. Беру прям оттуда копирую в саблайн (добавляю important) — И НИЧЕГО НЕ ПРОИСХОДИТ! Поэтому, идеальный вариант найти свойство в панели разработчика и задать значения там! Почему так бывает — не пойму, браузер — сбрасываю кеш, пробую другие браузеры… где-то тормозит… Грешил на саблайн, скачал пропатченую версию, думал не будет появляться надоедливое сообщение… так началось выскакивать — обнови программу, обновил — и снова исходное сообщение…
                                  2. Sergey
                                    13 февраля 2020, 20:29
                                    Спасибо, Александр!
                            2. Sergey
                              12 февраля 2020, 06:13
                              Здравствуйте, Александр. Подскажите, пожалуйста, автоматически не открывается модальное окно после загрузки страницы (создаю сайт локально)!
                              
                              <a href="#myModal" class="btn btn-default" data-toggle="modal">support and counseling</a>
                              <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">support and counseling</h4>
                                    </div>
                                    <div class="modal-body">
                                      <form role="form">
                              			<fieldset>
                              				<hr class="colorgraph">
                              				<div class="form-group">
                              				<input type="text" name="review_name" id="name" class="form-control input-lg" placeholder="your name">
                              			    </div>
                              				<div class="form-group">
                                                  <input type="email" name="email" id="email" class="form-control input-lg" placeholder="your email">
                              				</div>
                              				<div class="form-group">
                                                  <input type="text" name="phone" id="phone" class="form-control input-lg" placeholder="your phone's number">
                              				</div>
                              				<div class="form-group">
                              				    <textarea type="text" name="query" id="query" class="form-control input-lg" placeholder="your question/query"></textarea>
                              				</div>
                              				<hr class="colorgraph">
                                                      <input type="submit" class="btn btn-lg btn-success" value="send">
                              			</fieldset>
                              		</form>
                                    </div>
                                </div>
                              </div>
                              
                               <script>
                              
                                $(window).load(function() {
                                  setInterval(function() {
                                    if (!$("#myModal").hasClass("in")) {
                                      $("#myModal").modal('show');
                                    }
                                  }, 60000);
                                });
                              </script>
                              
                              Спасибо!
                              1. Александр Мальцев
                                12 февраля 2020, 06:43
                                Здравствуйте! У вас через каждые 60000 мс проверяется открыто ли всплывающее окно (т.е. имеет ли оно класс in), и если нет, то показывается. Таким образом окно у вас должно появится только спустя 60 секунд после полной загрузки страницы.
                                1. Sergey
                                  12 февраля 2020, 08:00
                                  Александр, спасибо за ответ!
                                  В том то и дело, что окно не открывается спустя, даже, час! После добавления модального окна появилась ошибка в браузере! itchief.ru/assets/uploadify/4/b/6/4b6cd8997792e9bd30f3c17de4773d17.jpg
                                  Возможно здесь причина?
                                  1. Александр Мальцев
                                    12 февраля 2020, 08:27
                                    Вам необходимо положить этот скрипт после подключения библиотеки Bootstrap и jQuery, т.к. он от них зависит.
                                    1. Sergey
                                      12 февраля 2020, 09:03
                                      СПАСИБО огромное, ВАМ. включилось отображение!!!
                                      Еще одно затруднение.
                                      Стилизовал кнопку:
                                      .btn-action, .btn-default {
                                          display: inline-block;
                                          position: fixed;
                                          bottom: 0px;
                                          right: 20px;
                                          z-index: 99;
                                          font-size: 14px;
                                          padding: 10px 20px;
                                          background: rgba(255,255,255,0.5);
                                      
                                      }
                                      
                                      .btn-default {
                                      	color:black;
                                          box-shadow: inset 0px 0px 0px 3px black;
                                      }
                                      <code>
                                      Не могу найти как изменить свойства отображения при наведении курсора (нужно задать черный цвет при наведении). Пробую 
                                      <code> .btn-action, .btn-default a:hover {
                                      	color:black;
                                              box-shadow: inset 0px 0px 0px 3px black;
                                      }
                                      <code>
                                      НЕ РЕАГИРУЕТ. 
                                      
                                      Как правильно в этом случае задать свойства в CSS?
                                      Спасибо!
                                      1. Александр Мальцев
                                        13 февраля 2020, 06:55
                                        Для выбора состояния hover, его нужно просто добавить к классу:
                                        .btn-action:hover, .btn-default:hover {
                                          color: black !important;
                                          box-shadow: inset 0px 0px 0px 3px black !important;
                                        }
                                        
                                        Если будет работать без !important, то тогда его можно убрать.
                                        1. Sergey
                                          13 февраля 2020, 07:03
                                          Спасибо, Александр. Сейчас попробую!
                                          1. Sergey
                                            13 февраля 2020, 07:24
                                            работает без !important. Александр, спасибо за дельные советы! Хорошего дня!
                              2. Aleks
                                30 января 2020, 15:29
                                Здравствуйте, я только недавно начал изучать яваскрипт, хотелось бы получить у Вас помощи в создании интерактивного окна.
                                1. Aleks
                                  30 января 2020, 16:57
                                  1. Александр Мальцев
                                    31 января 2020, 08:22
                                    Напишите, как это должно работать?
                                    1. Aleks
                                      31 января 2020, 09:01
                                      Это как викторина, с вопросами по теме.
                                      1. Александр Мальцев
                                        01 февраля 2020, 14:55
                                        Если вы будете реализовывать проверку и обработку ответов на сервере, то нужно реализовывать через формы и AJAX.
                                        Если без сервера, то создаёте в JavaScript массив из объектов. В объекте создаёте ключи для вопроса, ответов, правильного ответа и других данных в зависимости от логики. Далее создаёте обработчики событий для кнопок, в которых пишите необходимую логику. В общем как-то так.
                                  2. Александр Мальцев
                                    30 января 2020, 15:47
                                    Здравствуйте! Расскажите, что вы хотите реализовать более подробно.
                                  3. Aleksandr Ustinov
                                    24 ноября 2019, 18:29
                                    Добрый день! Есть две кнопки, и два модальных окна

                                    <a href="" class="text-inverse" title="Выплатить"tooltip data-toggle="modal" data-target="modal1"><i class="fa fa-plus-square" style="font-size: 40px;color: green;"></i></a>
                                    
                                    		<a href="" class="text-inverse" title="Отклонить"tooltip data-toggle="modal" data-target="modal2"><i class="fa fa-minus-square" style="font-size: 40px;color: red;"></i></a>
                                    Начало от первого
                                    <!-- sample modal content -->
                                    <div class="modal fade " tabindex="-1" id="modal1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
                                                                    <div class="modal-dialog modal-lg">
                                    Соответственно второе
                                    <!-- sample modal content -->
                                    <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
                                                                    <div class="modal-dialog modal-lg">
                                    Содержимое полностью одинаково, разница лишь в id и форме
                                    Не могу понять, где ошибся, если одно из окон убирать то оба работают по одиночке, если оба кода вставлены то первое работает а второе просто затемняет экран и всё.
                                    1. Александр Мальцев
                                      25 ноября 2019, 15:30
                                      Привет! В data-target указывается селектор. А что за атрибут tooltip?
                                      <a href="" class="text-inverse" title="Выплатить" data-toggle="modal" data-target="#modal1"><i class="fa fa-plus-square" style="font-size: 40px;color: green;"></i></a>
                                      
                                      <a href="" class="text-inverse" title="Отклонить" data-toggle="modal" data-target="#modal2"><i class="fa fa-minus-square" style="font-size: 40px;color: red;"></i></a>
                                      
                                    2. Alexander
                                      06 сентября 2019, 18:26
                                      Добрый день, Александр!
                                      Прошу вашей помощи, не могу самостоятельно решить задачу.
                                      Есть кнопка:
                                      <button 
                                      	class="btn btn-unique waves-effect waves-light" 
                                      	data-toggle="modal" 
                                      	data-target="#modalFourCard">ПОДРОБНЕЕ
                                      </button>
                                      
                                      При нажатии открывает: modal окно с информацией и двумя кнопками
                                      <a 
                                      	href="#modalFeedbackForm"
                                      	class="btn btn-primary waves-effect" 
                                      	data-toggle="modal" 
                                      	data-target="#modalFeedbackForm">Заказать звонок
                                      </a> 
                                      <button 
                                      	class="btn btn-primary waves-effect" 
                                      	data-dismiss="modal">Закрыть окно 
                                      </button>
                                      
                                      При нажатии: «Заказать звонок» окно закрывается и открывается Modal Feedback Form.
                                      $(function(){
                                      var two_modal = function(modalFourCard, modalFeedbackForm) {
                                        var show_modalFeedbackForm = false;
                                        $('a[href="' + modalFeedbackForm + '"]').click(function(e) {
                                          e.preventDefault();
                                          show_modalFeedbackForm = true;
                                          $(modalFourCard).modal('hide');
                                        });
                                        $(modalFourCard).on('hidden.bs.modal', function (e) {
                                          if (show_modalFeedbackForm) {
                                            show_modalFeedbackForm = false;
                                            $(modalFeedbackForm).modal('show');
                                          }
                                        })
                                      }('#modalFourCard','#modalFeedbackForm');
                                      });
                                      
                                      Всё отлично работает окно закрывается отправляю сообщение всё тоже замечательно.
                                      После отправки хочу открыть Modal в котором будет сообщение об успешной отправке, при открытии #modalSuccess ==> закрыть: #modalFeedbackForm
                                      $('#modalFeedbackForm').modal('hide');
                                          $('#modalFeedbackForm').on('hidden.bs.modal', function (e) {
                                              if ($('#modalFeedbackForm').attr('data-result') === 'success') {
                                              $('#modalSuccess').modal('show');
                                              }
                                          })
                                      
                                      После успешной отправки окно так и не могу заставить закрыться и показать #modalSuccess.
                                      Что именно я не так делаю подскажите пожалуйста.
                                      1. Alexander
                                        06 сентября 2019, 21:22
                                        ('data-result') === 'success') исправил ('data.result') === 'success')
                                        Пока по прежнему не открывается новое окно.
                                        1. Alexander
                                          08 сентября 2019, 18:32
                                          Спасибо вопрос снимается!
                                          Я нашёл решение.
                                      2. Архаил
                                        09 июня 2019, 23:26
                                        Доброго времени суток, Александр. Хочу реализовать один функционал, но вот не могу додумать до конца как реализовать. Мне надо чтобы при выборе по input type=«radio» из списка, рядом всплывала кнопка для вызова модального меню, в котором запрашивалось подтверждение на действие. Если человек соглашался, то данные уходили на сервер, если нет, то закрывалось модальное меню, каким образов правильнее сделать? на кнопку input type=«radio» повесить событие onclick при нажатии которого вызывалась функция и передавала данные в вызываемую функцию js, а та в свою очередь запускала модальное окно где по клику на кнопку «Да» запускать новый скрипт который передаст данные на сервер? Или есть более правильный вариант?
                                        P.S. У меня на странице несколько разных блоков с контентом, списком (input type=«radio»), но структура модального окна и данные будут равного кол-ва значения разные, за исключением того что при вызове с разных блоков запись на сервере будет писаться в разные таблицы в БД.
                                        1. Александр Мальцев
                                          26 июня 2019, 15:36
                                          Здравствуйте! Можно при нажатии на кнопку, определять какой радиоэлемент выбран, в соответствии с этим изменять данные модального окна и открывать его. Далее при нажатии кнопку «Да» собирать нужные данные со страницы и отправлять их на сервер.
                                        2. Александр
                                          27 мая 2019, 23:06
                                          Подскажите, модальное окно вызывается из частичного представления?
                                          1. Александр Мальцев
                                            31 мая 2019, 13:58
                                            Это вопрос наверно про какой-то фреймворк. Могу предположить, что они наверно предназначены для исключения дублирования кода. Если так, то это будет лучше.
                                          2. Oleg
                                            27 мая 2019, 17:13
                                            Здравствуйте! Подскажите пожалуйста, как зафиксировать статическую ширину таблицы в модальном окне.
                                            Спасибо!
                                            1. Oleg
                                              23 мая 2019, 11:35
                                              Подсткажите пожалуйста, если я добавляю таблицу в модальное окно, как я могу зафиксировать ее размер, согласно размеру окна и настроить фиксированную ширину колонок. При попытке использовать CSS и обернуть таблице в настройки не применяются.
                                              <div id="searchModal" class="modal fade " data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                  <div class="modal-dialog " role="document">
                                                    <div class="modal-content">
                                                      <div class="modal-header">
                                                          <h4 class="modal-title" id="gridModalLabel">Batch Search</h4>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                        
                                                      </div>
                                                        <div class="modal-body">
                                                        
                                                        <section>
                                                            <form > 
                                                              <div class="form-row"  >
                                                                <div class="col col-sm-6">
                                                                  <div class="form-group" >
                                                                    
                                                                        <label for="datefrom">Date from</label>
                                                                        <input id="datefrom" class="form-control" type="text" >
                                                    
                                                                  </div>
                                                                </div> 
                                                                
                                                                <div class="col col-sm-6">
                                                                   <label for="dateto">Date to</label>
                                                                        <input id="dateto" class="form-control" type="text" >
                                                                </div>
                                                                
                                                                <div class="row">
                                                                    <div class="col col-sm-12">
                                                                      <div >
                                                                        <table class="table table-bordered table-hover " >
                                                                          <thead>
                                                                            <th>Name1</th>
                                                                            <th>Name2</th>
                                                                            <th>Time1</th>
                                                                            <th>Time2</th>
                                                                          </thead>
                                                                          <tbody>
                                                                            <tr>
                                                                              <td>sdfsdfgfd</td>
                                                                              <td>3y35</td>
                                                                              <td>sdf,</td>
                                                                              <td>3745</td>
                                                                            </tr>
                                                                          </tbody>
                                                                        </table>
                                                                      </div>
                                                                    </div>
                                              
                                                                </div>
                                                            
                                                            
                                                              <!-- <span class="input-group-btn">
                                                                <button type="submit" class="btn btn-primary">Search</button>
                                                              </span> -->
                                                              
                                                              </div>
                                                            </form>
                                                            </section>
                                                                
                                                              
                                                      </div>
                                              
                                                      <div class="modal-footer">
                                                          <span class="input-group-btn">
                                                          <button type="submit" class="btn btn-success " >Search</button>
                                                        </span>
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              
                                              
                                              1. Александр Мальцев
                                                27 мая 2019, 17:37
                                                Здравствуйте!
                                                Зачем столько лишних обёрток вы используете в HTML?
                                                <div class="modal-body">
                                                  <form>
                                                    <div class="form-row">
                                                      <div class="col-sm-6 form-group">
                                                        ...
                                                      </div>
                                                      <div class="col-sm-6 form-group">
                                                        ...
                                                      </div>
                                                      <div class="col-sm-12 form-group">
                                                        <table class="table table-bordered table-hover">
                                                           <thead>
                                                             <tr>
                                                              <th style="width: 100px;">Name1</th>
                                                              <th style="width: 100px;">Name2</th>
                                                              <th>Time1</th>
                                                              <th>Time2</th>
                                                            </tr>
                                                          </thead>
                                                          <tbody>
                                                            <tr>
                                                              ...
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </div>
                                                    </div>
                                                  </form>
                                                </div>
                                                
                                                Установка фиксированной ширины колонкам осуществляется с помощью CSS. Как это выполнить приведено в примере.
                                                1. Oleg
                                                  29 мая 2019, 21:44
                                                  Спасибо большое!
                                              2. cleantis
                                                02 апреля 2019, 12:22
                                                Здравствуйте, bootstrap 4 если модальное окно поместить в navbar fixed-bottom(fixed-top/sticky-top) то модальное окно после открытия не закрывается, не подскажите как решить.
                                                1. Александр Мальцев
                                                  03 апреля 2019, 15:47
                                                  Здравствуйте! Интересно, а в какое место Navbar вы положили HTML код Modal?
                                                  Обычно, HTML код Modal помещают в body и не вкладывают ни в какой другой элемент.
                                                  Пример: itchief.ru/examples/lab.php?topic=bootstrap&file=b4-navbar-modal
                                                2. Вадим
                                                  01 декабря 2018, 15:29
                                                  Доброго дня! Подскажите пожалуйста… Как вывести в модальное окно содержимое модального окна (id), но с другой страницы сайта?
                                                  1. Александр Мальцев
                                                    01 декабря 2018, 17:36
                                                    Здравствуйте! Можно выполнить так:
                                                    <!-- Кнопка, для открытия модального окна -->
                                                    <button id="show-modal" class="btn btn-primary">Открыть модальное окно</button>
                                                    
                                                    <script>
                                                    var 
                                                      anotherPage = 'http://localhost/feedback/index.html';
                                                      modalOnCurrentPage = '#modal2',
                                                      modalOnAnotherPage = '#modal1';
                                                    
                                                    $('#show-modal').click(function() {
                                                      $.get(anotherPage+modalOnAnotherPage, function(data) {
                                                        var output = $(data).find('.modal-body').html();
                                                        // выполнить фильтрацию кода (при необходимости)
                                                        // ...
                                                        $(modalOnCurrentPage).find('.modal-body').html(output);
                                                        $(modalOnCurrentPage).modal('show');
                                                      });
                                                    });
                                                    </script>
                                                    
                                                    1. Вадим
                                                      01 декабря 2018, 19:17
                                                      Александр! Спасибо за ответ. Попробовал заменив и путь к странице и id, но к сожалению не работает.
                                                      1. Александр Мальцев
                                                        03 декабря 2018, 14:55
                                                        Чтобы это работало сайт должен выполняться на веб-сервере.
                                                  2. Николай
                                                    23 ноября 2018, 12:05
                                                    А вот такого скрипта нет у вас? Окно показывается справа на сайте, почти прижато к низу, фон при его показе не затемняется. Оно появляется 1 раз в сутки. Закрывается по клику на крестик и не мешает навигации по сайту (не блокирует скролл).

                                                    1. Александр Мальцев
                                                      26 ноября 2018, 14:50
                                                      Создание плавающего окна (элемента) осуществляется с помощью CSS свойства position: fixed.
                                                      Для того чтобы сохранить дату последнего показа окна (элемента) можно воспользоваться хранилищем LocalStorage.
                                                      Пример решения подобной задачи можно посмотреть здесь.
                                                      CSS код:
                                                      .dialog {
                                                        position: fixed;
                                                        bottom: 15px;
                                                        right: 15px;
                                                        width: 200px;
                                                        height: 150px;
                                                        padding: 15px 30px 0;
                                                        border: 1px solid transparent;
                                                        color: #856404;
                                                        background-color: #fff3cd;
                                                        border-color: #ffeeba;
                                                        z-index: 9999;
                                                      }
                                                      .dialog-hide {
                                                        display: none;
                                                      }
                                                      .dialog-close {
                                                        position: absolute;
                                                        top: 0;
                                                        right: 0;
                                                        padding: 6px;
                                                        color: inherit;
                                                        background-color: transparent;
                                                        border: 0;
                                                        -webkit-appearance: none;
                                                        font-size: 24px;
                                                        font-weight: 700;
                                                        line-height: 1;
                                                        text-shadow: 0 1px 0 #fff;
                                                        opacity: .5;
                                                      }
                                                      .dialog-close:focus, .dialog-close:hover {
                                                        color: #000;
                                                        text-decoration: none;
                                                        opacity: .75;
                                                        cursor: pointer;
                                                      }
                                                      
                                                      HTML код:
                                                      <div id="dialog" class="dialog dialog-hide">
                                                        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                                        <button type="button" class="dialog-close">
                                                          <span aria-hidden="true">×</span>
                                                        </button>
                                                      </div>
                                                      
                                                      JavaScript сценарий:
                                                      $('.dialog-close').click(function(){
                                                        if (!$(this).closest('.dialog').hasClass('dialog-hide')) {
                                                          $(this).closest('.dialog').addClass('dialog-hide');
                                                        }
                                                      });
                                                      var dateShowDialog = localStorage.getItem("dateShowDialog");
                                                      var currentDate = new Date();
                                                      var diffDate = (Date.parse(currentDate) - Date.parse(dateShowDialog)) / (1000 * 60 * 60);
                                                      if (dateShowDialog === null || diffDate > 24) {  
                                                        $("#dialog").removeClass('dialog-hide');
                                                        localStorage.setItem('dateShowDialog', currentDate);
                                                      }
                                                      
                                                      1. Николай
                                                        26 ноября 2018, 15:32
                                                        Однако немного неправильно работает. Оно не появляется после открытия другой страницы. Т.е. зашел на сайт — окно есть, перешел на другую страницу — окна нет. Но я не нажимал при этом на «крестик». А как сделать чтобы оно показывалось, пока на «крестик» не нажмешь?
                                                        1. Александр Мальцев
                                                          10 декабря 2018, 13:43
                                                          Так он для всего сайта.
                                                          Если необходимо сделать чтобы он работал на разных страницах, то сценарий необходимо переделать. Например так:
                                                          $(function() {
                                                            $('.dialog-close').click(function(){
                                                              if (!$(this).closest('.dialog').hasClass('dialog-hide')) {
                                                                $(this).closest('.dialog').addClass('dialog-hide');
                                                              }
                                                            });
                                                            var dateShowDialog = localStorage.getItem(btoa(location.pathname));
                                                            var currentDate = new Date();
                                                            var diffDate = (Date.parse(currentDate) - Date.parse(btoa(location.pathname))) / (1000 * 60 * 60);
                                                            if (dateShowDialog === null || diffDate > 24) {  
                                                              $("#dialog").removeClass('dialog-hide');
                                                              localStorage.setItem(btoa(location.pathname), currentDate);
                                                            }
                                                          });
                                                          
                                                        2. Николай
                                                          26 ноября 2018, 15:00
                                                          Ой спасибо вам огромное!!! Ваш сайт всегда как палочка-выручалочка!
                                                      2. Архаил
                                                        22 октября 2018, 17:03
                                                        Доброго времени суток! Подскажите, пожалуйста, вот имеется форма с полями, могу ли я добавить в форму кнопку вызова модального окна, туда вывести дополнительные поля для заполнения или выбора из списка конкретного элемента(select, checkbox), после выбора и закрытия окна записать выбранные (полученные) значения и их ключи из модального окна куда-нибудь (в каком-нибудь виде) или присвоить в виде объекта к кнопке вызова модального, для дальнейшей передачи данных на сервер уже с заполненными полями не входящими в модальное окно, а расположенными в основной форме. Буду рад любому ответу или ссылкам на материал для освоения.
                                                        P.S. По идее если модальное окно скрыто, находиться в (hide), то по идее я не могу получить значения полей скрытого элемента.
                                                        1. Александр Мальцев
                                                          25 октября 2018, 14:19
                                                          Доброго! Конечно можете. Вот пример: itchief.ru/examples/lab.php?topic=bootstrap&file=b4-modal-example-10
                                                          1. Архаил
                                                            01 ноября 2018, 12:04
                                                            Благодарю! Ознакомлюсь с примером.
                                                        2. Елена
                                                          06 августа 2018, 22:52
                                                          Здравствуйте.
                                                          Joomla! 3.8.3 шаблон Protostar сайт
                                                          В статье необходимо разместить модуль подписки, чтобы читатель при желании мог подписаться на продолжение.
                                                          Реализация модулем «Newsletter Subscriber»
                                                          Вставляю в тело статьи
                                                          <p><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleModal">подписаться на продолжение</button></p>
                                                          <div id="exampleModal" class="modal fade">
                                                          <div class="modal-dialog">
                                                          <div class="modal-body">{loadmodule mod_newsletter_subscriber,подписка}</div>
                                                          </div>
                                                          </div>
                                                          И работает хорошо при условии, что выключен модуль того же автора «Rapid Contact» который используется для заказа обратного звонка.
                                                          Вставляю код модального окна в модуль HTML-код
                                                          <div id="exampleModal" class="modal fade">
                                                          <div class="modal-content">
                                                          <div class="modal-body">{loadmodule mod_rapid_contact,перезвон}</div>
                                                          </div>
                                                          </div>
                                                          Ищу помощи у Вас потому что: Оба модуля работают нормально при условии что один из них не в модальном окне. Если оба модуля вызываются кнопкой открывающей модальное окно отображается только один модуль в обоих окнах.
                                                          Самостоятельные попытки результата не принесли. Пожалуйста если есть решение — Подскажите.
                                                          Спасибо
                                                          1. Александр Мальцев
                                                            07 августа 2018, 16:38
                                                            Здравствуйте! С Joomla! не работаю, ничего посоветовать не могу.
                                                          2. Татьяна
                                                            01 мая 2018, 17:09
                                                            Добрый день! Подскажите, пожалуйста, в чём может быть проблема: после открытия модального окна у боди появляется правый паддинг в 17пкс. Это видимо связано с наличием скроллинга на странице. Всё бы ничего, но этот паддинг не срабатывает на зафиксированной шапке и она чуть растягивается. Хотела скомпенсировать этот паддинг, но почему-то события по открытию не срабатывают, ни show, ни shown. Версия jquery = 1.12.4.
                                                            1. Александр Мальцев
                                                              02 мая 2018, 06:39
                                                              Добрый день! Этот padding-right необходим для того, чтобы не произошёл сдвиг всего контента. 17px — это ширина полосы прокрутки. Но не все браузеры имеют активную полосу прокрутки, в некоторых она равна 0px и расположена над контентом. Это необходимо учитывать, т.к. постоянное добавление padding-right: 17px к navbar fixed-top может добавить сдвиг на этих устройствах.
                                                              1. Татьяна
                                                                02 мая 2018, 01:32
                                                                Всё в порядке, разобралась.
                                                              2. Zerkysa
                                                                01 мая 2018, 12:26
                                                                Доброго времени суток! Начал изучения модальных окон с Ваших уроков, и все понятно. Но столкнулся с такой проблемой.
                                                                Создал ссылку, которая открывает модальное окно
                                                                '<a href="#myModalEdit" data-toggle="modal">редактирование</a>' 
                                                                . И встал вопрос, а как передать в модальное окно значение переменой (или несколько значений) с которой бы я мог работать.
                                                                1. Александр Мальцев
                                                                  01 мая 2018, 14:06
                                                                  В этом случае лучше не использовать атрибут data-toggle, а работать с модальным окном с помощью JavaScript.
                                                                  Например:
                                                                  <!-- Кнопка, которая будет открывать модальное окно -->
                                                                  <a id="myModalEditBtn" href="#">редактирование</a>
                                                                  ...
                                                                  <!-- HTML-код модального окна-->
                                                                  <div id="myModalEdit" class="modal fade">
                                                                      ...
                                                                      <p id="myP"></p>
                                                                  </div>
                                                                  ...
                                                                  <script>
                                                                  $(function(){
                                                                      var text = 'Некоторый текст, который необходимо вставить в модальное окно';
                                                                      $('#myModalEditBtn').click(function(e){
                                                                          // отменяем стандартное поведение браузера при нажатии на ссылку
                                                                          e.preventDefault();
                                                                          // передаем в контент элемента с id="myP" содержимое переменной text
                                                                          $('#myP').text(text);
                                                                          // открываем модальное окно
                                                                          $('#myModalEdit').modal('show');
                                                                      });
                                                                  });
                                                                  </script>
                                                                  
                                                                  1. Zerkysa
                                                                    03 мая 2018, 04:36
                                                                    Спасибо Александр! Буду изучать дальше
                                                                2. Алексанжр
                                                                  30 апреля 2018, 18:46
                                                                  Здравствуйте, я размещаю форму в данное модальное окно, хочу что бы, при отправки формы, модальное окно снова открывалось. Что бы оно открывалось при валидации или отправке.
                                                                  Использовал следующий код, что бы реализовать задуманное. Но в валидации браузера выдает ошибку: TypeError: $(...).modal is not a function. (указывает на эту строку
                                                                  $('#call-order').modal('show')
                                                                  ). Я не могу понять в чем дело.
                                                                  window.addEventListener('load', function(){
                                                                  if(document.querySelector('#call-order .text-danger, #call-order .alert')) $('#call-order').modal('show')
                                                                  })
                                                                  1. Александр Мальцев
                                                                    01 мая 2018, 13:47
                                                                    Здравствуйте! Проверьте порядок подключения js-файлов. Должно быть так: jQuery -> bootstrap.js -> ваш код.
                                                                    1. Алексанжр
                                                                      01 мая 2018, 17:58
                                                                      Я разобрался, там нужно было другую версию файла bootstrap поставить, и только. А об этом даже ни где не описано( Убил целый день.
                                                                  2. DIMMS
                                                                    13 марта 2018, 13:21
                                                                    Александр, доброго времени суток Вам! Огромное спасибо за Ваши труды. Ваш сайт это настоящая настольная книга. Пытаюсь реализовать фото галерею в модальном окне на основе плагина Gridify, с Вашей статьи, но контент не хочет вписываться в модальное окно. Бьюсь уже 2 дня, прошу помощи. Что не так в коде? Все вариации с position перепробовал, модальное окно всплывает в виде узкой области с заголовком, а контент галереи не вписывается в нее и отображается ниже накладываясь друг на друга. При изменении размера окна браузера Gridify начинает работать правильно, но модальное окно остается прежних размеров. Спасибо.

                                                                    <!DOCTYPE html>
                                                                    <html>
                                                                    <head>
                                                                    	<title>foto</title>
                                                                    	<meta charset="utf-8"/>
                                                                    	<meta name="viewport" content="width=device-width">
                                                                    	 <!-- Bootstrap CSS -->
                                                                        <link href="bootstrap3.3.7.min.css" rel="stylesheet">
                                                                        <!-- fancyBox CSS -->
                                                                        <link href="jquery.fancybox.min.css" rel="stylesheet">
                                                                    	<!--my css-->
                                                                    	<link rel="stylesheet" href="style.css">
                                                                    	<!-- jQuery -->
                                                                    	<script src="jquery-3.3.1.min.js"></script>
                                                                    	<!-- Bootstrap JS -->
                                                                    	<script src="bootstrap3.3.7.min.js"></script>
                                                                    	<!-- fancyBox JS -->
                                                                    	<script src="jquery.fancybox.min.js"></script>
                                                                    	<!-- Gridify -->
                                                                    	<script src="gridify-min.js"></script>
                                                                    	<script>
                                                                    		$(function () {
                                                                    			var options =
                                                                    				{
                                                                    					srcNode: 'img',             // grid items (class, node)
                                                                    					margin: '15px',             // margin in pixel, default: 0px
                                                                    					width: '200px',             // grid item width in pixel, default: 220px
                                                                    					max_width: '',              // dynamic gird item width if specified, (pixel)
                                                                    					resizable: true,            // re-layout if window resize
                                                                    					transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
                                                                    				};
                                                                    			$('.grid').gridify(options);
                                                                    		});
                                                                    	</script>
                                                                        <style>
                                                                            img {
                                                                                padding: 4px;
                                                                                background-color: #fff;
                                                                                border: 1px solid #ddd;
                                                                                border-radius: 4px;
                                                                            }
                                                                    
                                                                            img:hover {
                                                                                opacity: 0.6;
                                                                                filter: alpha(opacity=60);
                                                                            }
                                                                        </style>
                                                                    	
                                                                    </head>
                                                                    <body>
                                                                    	<main>
                                                                    		<!-- информационная часть страницы -->	
                                                                    		<article id="articl" class="container-fluide">
                                                                    			<div class="col-xs-12 glavnaya">				
                                                                    				<h3 class="text-center">Фото архив</h3>
                                                                    		<!--превьюшки фото галереи-->
                                                                    				<div class="foto-block col-xs-6 col-sm-4 col-md-4 col-lg-3">
                                                                    					<div class="view view-first">  
                                                                    						 <img src="images/foto-arhiv/foto2m/DSC_0163_m.jpg"/>  
                                                                    						 <div class="mask">  
                                                                    							 <p>Фотографии</p>  
                                                                    							 <a href="#lightbox" data-toggle="modal" class="info">Смотреть</a>  
                                                                    						 </div>  
                                                                    					</div> 
                                                                    				</div>
                                                                    		<!-- модальное окно -->		
                                                                    				<div class="modal fade" id="lightbox">
                                                                    					<div class="modal-dialog modal-lg">
                                                                    					    <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-fluide">
                                                                    								<div class="container">
                                                                    									<div class="grid">
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0162.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0162_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0163.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0163_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0165.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0165_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0168.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0168_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0291.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0291_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0292.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0292_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0293.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0293_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0304.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0304_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0305.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0305_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0337.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0337_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0340.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0340_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0343.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0343_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0344.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0344_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    										<div class="grid-item">
                                                                    											<a data-fancybox="gallery" href="images/foto-arhiv/foto2/DSC_0348.jpg">
                                                                    												<img class="img-responsive" src="images/foto-arhiv/foto2m/DSC_0348_m.jpg" alt="">
                                                                    											</a>
                                                                    										</div>
                                                                    									</div>
                                                                    								</div>
                                                                    								</div>
                                                                    							</div>	
                                                                    						</div>
                                                                    					</div>
                                                                    				</div>	
                                                                    			</div>							
                                                                    		</article>
                                                                    	</main>
                                                                    </body>
                                                                    </html>
                                                                    1. Александр Мальцев
                                                                      23 марта 2018, 14:07
                                                                      Спасибо!
                                                                      В плагине Gridify есть ошибка, она не вычисляет высоту контейнера.
                                                                      Попробуйте использовать вот эту исправленную версию плагина Gridify.
                                                                    2. Ясир
                                                                      20 февраля 2018, 22:15
                                                                      Добрый час! Когда с официального сайта беру примеры, то «modal» появляется и тут же исчезает, не понятно в чем может быть ошибка версия BS 3.3.7 Подскажите кто сталкивался с подобным
                                                                      1. Eugene
                                                                        11 февраля 2018, 07:08
                                                                        Здравствуйте.
                                                                        Как в моём случае правильно применить параметр handleUpdate модального окна?
                                                                        Используется Bootstrap4.
                                                                        Модальное окно полностью формируется и вставляется в DOM при помощи javascript.
                                                                        В процессе, когда окно открыто, его размеры могут измениться. Т.к. в модаль будут подгружаться данные из сервера и содержимое модали измениться.
                                                                        Если я правильно понял, необходимо написать что-то вроде этого:
                                                                        var modal = 'тут html-код модального окна';
                                                                        $(modal).prependTo('body').modal({backdrop:true, keyboard:true, show:true}).modal('handleUpdate');
                                                                        
                                                                        Или же handleUpdate можно указать как часть передаваемого объекта? т.е.:
                                                                        $(modal).prependTo('body').modal({backdrop:true, keyboard:true, handleUpdate:true, show:true});
                                                                        
                                                                        Заранее спасибо!
                                                                        1. Александр Мальцев
                                                                          11 февраля 2018, 13:15
                                                                          Здравствуйте.
                                                                          Параметра handleUpdate нет, есть только метод.
                                                                          1. Eugene
                                                                            11 февраля 2018, 14:56
                                                                            Александр, спасибо за ответ. Но вынужден не согласиться.
                                                                            Если высота модального окна может измениться уже после того когда оно открыто (например, если контент загружается динамически), то чтобы скорректировать его позицию необходимо использовать параметр handleUpdate() метода .modal().
                                                                            $('#myModal').modal('handleUpdate');
                                                                            Т.е. мы передаём строку 'handleUpdate' в качестве аргумента в метод .modal(), а не используем метод handleUpdate().
                                                                            Почему и возникает вопрос. Нужно применять метод modal() с аргументом handleUpdate к открытой модали?
                                                                            $('#myModal').modal('handleUpdate');
                                                                            Или можно передать handleUpdate сразу при инициализации модали?
                                                                            $('#myModal').modal({keyboard:false, handleUpdate:true, show:true});
                                                                            1. Александр Мальцев
                                                                              11 февраля 2018, 15:55
                                                                              handleUpdate — это метод, хоть он и указывается в качестве параметра modal. Он не является свойством, как keyboard, backdrop и др.
                                                                              Его (handleUpdate) необходимо вызывать после загрузки контента, т.к. вы указали:
                                                                              $('#myModal').modal('handleUpdate');
                                                                              
                                                                              1. Eugene
                                                                                11 февраля 2018, 16:21
                                                                                Да, так и есть. Сам уже понял, что был неправ))
                                                                                И последний вопрос. Т.е. handleUpdate необходимо вызывать каждый раз, когда в модали изменяются данные? Например:
                                                                                Открыл модаль, показал изначальное содержимое;
                                                                                изменил данные в .modal-body;
                                                                                сделал handleUpdate;
                                                                                ещё раз изменил содержимое .modal-body;
                                                                                ещё раз применил handleUpdate;
                                                                                закрыл модаль…
                                                                                Или же достаточно вызвать handleUpdate один раз, а дальнейшие изменения будут отслеживаться автоматом?
                                                                                1. Александр Мальцев
                                                                                  11 февраля 2018, 17:01
                                                                                  Конечно, каждый раз. Чтобы она выполнила изменения, её необходимо вызвать. Сама себя она вызывать не будет :)
                                                                        2. Александр
                                                                          01 февраля 2018, 01:05
                                                                          Здравствуйте.
                                                                          Такой вопрос, у меня в модальном окне отображается контент (товарные позиции корзины), если я хочу удалить с корзины в модальном окне товар то у меня закрывается модальное окно
                                                                          class="modal-content"
                                                                          как сделать так чтобы после нажатия на кнопку удаления товара товар удалялся и модальное окно оставалось активное. Вот ссылка на кнопку удаления товара
                                                                          <div class="item-remove lsp-js-item-delete" data-toggle="modal"><a href="#"></a></div>
                                                                          Заранее спасибо
                                                                          1. Александр Мальцев
                                                                            11 февраля 2018, 13:19
                                                                            Здравствуйте.
                                                                            Вам не нужно использовать класс data-toggle=«modal». Его необходимо использовать только для переключения модального окна.
                                                                          2. Антон
                                                                            11 декабря 2017, 14:25
                                                                            Подскажите пожалуйста как сделать кнопку вверх модального окна?
                                                                            1. Александр Мальцев
                                                                              11 февраля 2018, 16:06
                                                                              В обработчик события кнопки вставить следующий код:
                                                                              $('.modal.show').animate({ scrollTop: 0 }, 200);
                                                                              
                                                                            2. ntym
                                                                              24 ноября 2017, 08:53
                                                                              Доброе утро!
                                                                              Подскажите, не смог разобраться. Как открыть модальное окно в модальном окне?
                                                                              Например:
                                                                              1. Открываем список контактов (там всякие кнопки: телеграмм, скайп, вибер и список телефонов)
                                                                              2. Нажимаем на список телефонов
                                                                              3. Окно с списком контактов пропадает и появляется окно с списком телефонов

                                                                              Заранее спасибо
                                                                              1. Антон
                                                                                13 декабря 2017, 09:21
                                                                                обработчик нажатия кнопки
                                                                                $(первое окно).off('hidden.bs.modal').on('hidden.bs.modal',function(){
                                                                                $(второе окно).modal('show');
                                                                                $(this).off('hidden.bs.modal');
                                                                                });
                                                                                $(первое окно).modal('hide');
                                                                                закрытие второго окна аналогично
                                                                                1. Антон
                                                                                  13 декабря 2017, 09:45
                                                                                  Или если Вы используете одно окно то так
                                                                                  $(окно).off('hidden.bs.modal').on('hidden.bs.modal',function(){
                                                                                  //манипуляции с окном
                                                                                  $(this).off('hidden.bs.modal');
                                                                                  $(окно).modal('show');
                                                                                  });
                                                                                  $(окно).modal('hide');
                                                                              2. vilya604
                                                                                13 ноября 2017, 17:01
                                                                                Добрый день! Спасибо за статью, много чем помогла. Но, к сожалению завис на одном месте:
                                                                                Есть окно, контент в которое подгружается аяксом(быстрый просмотр товара). Из этого окна вызывается 2е окно (вы положили в корзину… продолжить покупки или перейти в корзину). Проблема заключается в том, что второе окно размещается в размерах первого, при этом, если размеры второго окна больше первого, то в первом появляется полоса прокрутки. При этом при закрытии второго окна (data-dismiss=«modal») — закрываются оба. Можно ли сделать так, то бы 2 окно не зависело от размеров 1?
                                                                                Вызов 1го окна:
                                                                                <a href="#" data-toggle="modal" data-target="#fast_preview" class="myLink" id="<?=$arItem['ID'];?>">Быстрый просмотр</a>
                                                                                Само окно:
                                                                                <div class="modal fade" id="fast_preview" tabindex="-1" role="dialog" aria-labelledby="fast_preview_modalLabel" aria-hidden="true">
                                                                                			<div class="popup modal-dialog fast_preview" data-template='<?=$templateName?>'>
                                                                                
                                                                                				<span class="close flaticon-delete30" data-dismiss="modal"></span>
                                                                                				<div id="preview-content"></div>
                                                                                			</div>
                                                                                		</div>
                                                                                Содержимое окна 1го окна, оно же содержимое 2го:
                                                                                <div class="modal fade" id="modal-buy" tabindex="-1" role="dialog" aria-labelledby="buy_modalLabel" aria-hidden="true">
                                                                                			<div class="popup modal-dialog popup_buy">
                                                                                				<span class="close flaticon-delete30" data-dismiss="modal"></span>
                                                                                				<div class="popup_buy__head">
                                                                                					<div class="popup_buy__head__img_wrapper">
                                                                                						<img class="product_img" src="" alt="none">
                                                                                					</div>
                                                                                					<div class="popup_buy__head_inner">
                                                                                						<div id="buy_modalLabel">Вы добавили в корзину</div>
                                                                                						<div><a class="brand-primary-color " href="#"></a></div>
                                                                                						<div class="popup_buy__head__make_order">
                                                                                							<a class="btn btn-primary"  href="/personal/cart/">оформить заказ</a>
                                                                                							Или
                                                                                							<span class="continue" data-dismiss="modal">продолжить покупки</span>
                                                                                						</div>
                                                                                					</div>
                                                                                				</div>
                                                                                		
                                                                                			</div>
                                                                                		</div>	
                                                                                Вызов 2 окна:
                                                                                <form class="item_manage__inner item_manage__buying add2basket_form with_modal" method="get"
                                                                                				  action="<?=$APPLICATION->GetCurPage()?>"
                                                                                				  data-target="#modal-buy"
                                                                                				  
                                                                                				
                                                                                			</form>
                                                                                1. Александр Мальцев
                                                                                  14 ноября 2017, 16:13
                                                                                  Посмотрите эту статью. В ней приводится скрипт, с помощью которого можно очень просто создавать Bootstrap модальные окна, а также управлять ими. Там же есть пример, в котором описывается, как можно очень просто создать несколько модальных окон.
                                                                                  1. vilya604
                                                                                    16 ноября 2017, 14:04
                                                                                    Спасибо! Буду изучать)
                                                                                2. Максим
                                                                                  20 октября 2017, 20:51
                                                                                  Здравствуйте! Подскажите пожалуйста как сюда добавить появление окна в определенное время, т.е. например с 21 до 9, заранее большое спасибо!
                                                                                  $(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);
                                                                                    });
                                                                                  });
                                                                                  
                                                                                  1. Иван
                                                                                    18 октября 2017, 15:01
                                                                                    У кого есть данная форма в сокращенном варианте, где будет поле «номер телефона» и кнопка Отправить и все?
                                                                                    Я пытался удалять все поля с капчей и добавлять новое с телефоном, все правил, а у меня то неактивна кнопка отпраить была, то потом при проверке пишет, что не все поля заполнены (имя), хотя вроде все упоминания везде убирал

                                                                                    Самый минимальный набор полей какой у кого? Поделитесь!
                                                                                    1. Roman
                                                                                      07 октября 2017, 15:57
                                                                                      Имеется форма, вызываемая в окне bootstrap
                                                                                      <div><a href="#myModal" class="btn" data-toggle="modal"><img src="images/callback.gif" /></a></div>
                                                                                      
                                                                                      
                                                                                      <!-- Modal 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>
                                                                                                  </div>
                                                                                                  <div class="modal-body">
                                                                                                      {rsform 1}
                                                                                                  </div>
                                                                                              </div>
                                                                                          </div>
                                                                                      </div>
                                                                                      
                                                                                      При отправке формы, даже если не прошла аякс валидация, окно закрывается. Если окно открыть повторно, то видим либо форму, с ошибками валидации, либо сообщение об успешной отправке. Можно ли сделать закрытие окна именно по нажатию на кнопку окна «закрыть», а не по нажатию на кнопку формы отправить?
                                                                                      1. Александр Мальцев
                                                                                        18 октября 2017, 15:41
                                                                                        Для этого у кнопки с помощью, которой вы отправляете форму необходимо убрать атрибут:
                                                                                        data-dismiss="modal"
                                                                                        <code>
                                                                                      2. Максим
                                                                                        02 октября 2017, 14:11
                                                                                        Здравствуйте, если можете подскажите пожалуйста.
                                                                                        Есть код который вызывает окно
                                                                                        $(window).scroll(function() {
                                                                                        if ($(document).scrollTop() > 7500 && (localStorage.getItem('myKey') != 'sending') && ($("#myModalsto").attr("displayed") === "false")) {
                                                                                        $('#myModalsto').modal('show');
                                                                                        $("#myModalsto").attr("displayed", "true");
                                                                                        }
                                                                                        });
                                                                                        После чего человеку дается выбор ( 2 кнопки ) и открывается другое окно в котором нажимая на кнопку происходит небольшой скролл автоматически в верх и первое окно снова открывается
                                                                                        if ($(document).scrollTop() > 7500  ......
                                                                                        Вопрос в том как сделать чтобы окно открылось только один раз, Но при перезагрузки страницы код при скролле снова сработал и открыл окно один раз?
                                                                                        1. Александр Мальцев
                                                                                          02 октября 2017, 14:54
                                                                                          Здравствуйте. Вам нужно как это отмечать. Например, с помощью класса shown.
                                                                                          $(window).scroll(function() {
                                                                                              if ($(document).scrollTop() > 7500 && (localStorage.getItem('myKey') != 'sending') && ($("#myModalsto").attr("displayed") === "false") && (!$("#myModalsto").hasClass('shown'))) {
                                                                                                  $('#myModalsto').modal('show');
                                                                                                  $('#myModalsto').addClass('shown');
                                                                                                  $("#myModalsto").attr("displayed", "true");
                                                                                              }
                                                                                          });
                                                                                          1. Максим
                                                                                            02 октября 2017, 16:58
                                                                                            Спасибо большое, вы меня очень сильно выручили!
                                                                                        2. Андрей
                                                                                          20 сентября 2017, 10:02
                                                                                          Уважаемый Александр. Подскажите как реализовать вывод статьи вордпресс по его id в модальное окно.
                                                                                          1. Александр Мальцев
                                                                                            22 сентября 2017, 11:06
                                                                                            Здравствуйте. Не использую WordPress.
                                                                                          2. Yummy
                                                                                            07 августа 2017, 09:15
                                                                                            Подскажите пожалуйста, есть модальное окно в нем ссылка на другое модальное окно, как организовать закрытие первого модального окна при вызове второго?
                                                                                            Окно вызывается <a href="#dop-product-modal" class="btn btn-primary" data-toggle="modal">Подробнее</a>
                                                                                            1. Александр Мальцев
                                                                                              08 августа 2017, 14:57
                                                                                              Добавил информацию как это сделать в статью. Ссылка для открытия 2 модального окна не должна иметь атрибут data-toggle.
                                                                                              1. Yummy
                                                                                                08 августа 2017, 20:29
                                                                                                Спасибо Вам огромное, а как быть если таких окон много?
                                                                                                1. Александр Мальцев
                                                                                                  09 августа 2017, 11:40
                                                                                                  Убрать в конце у функции скобки, т.е. не вызывать её сразу.
                                                                                                  var two_modal = function(id_modal_1,id_modal_2) {
                                                                                                    //...
                                                                                                  };
                                                                                                  
                                                                                                  После определения функции указать из какого модального окна можно открыть другое:
                                                                                                  // например, из #modal_1 можно открыть #modal_2
                                                                                                  two_modal('#modal_1', '#modal_2');
                                                                                                  // например, из #modal_4 можно открыть #modal_1
                                                                                                  two_modal('#modal_4', '#modal_1');
                                                                                                  
                                                                                                  Можно даже так:
                                                                                                  two_modal('#modal_1', '#modal_2');
                                                                                                  two_modal('#modal_1', '#modal_3');
                                                                                                  two_modal('#modal_2', '#modal_1');
                                                                                                  two_modal('#modal_2', '#modal_3');
                                                                                                  two_modal('#modal_3', '#modal_1');
                                                                                                  two_modal('#modal_3', '#modal_ц');
                                                                                                  
                                                                                                  В этом случае из любого модального окна можно будет открыть другое модальное окно (при наличии соответствующей ссылки).
                                                                                                  1. Егор
                                                                                                    12 октября 2018, 17:39
                                                                                                    Добрый день!
                                                                                                    Опишите пожалуйста более детально.
                                                                                                    Вот что есть, не работает:

                                                                                                    Второй вопрос:
                                                                                                    Если нужно окон очень много, то только добавлять вот так или есть ещё какой способ.
                                                                                                    1. Егор
                                                                                                      12 октября 2018, 18:19
                                                                                                      <script>
                                                                                                          $(function(){
                                                                                                           
                                                                                                          // #modal_1 - селектор 1 модального окна
                                                                                                          // #modal_2 - селектор 2 модального окна, которое необходимо открыть из первого
                                                                                                          var two_modal = function(id_modal_1,id_modal_2) {
                                                                                                            // определяет, необходимо ли при закрытии текущего модального окна открыть другое
                                                                                                            var show_modal_2 = false;
                                                                                                            // при нажатии на ссылку, содержащей в качестве href селектор модального окна
                                                                                                            $('a[href="' + id_modal_2 + '"]').click(function(e) {
                                                                                                              e.preventDefault();
                                                                                                              show_modal_2 = true;
                                                                                                              // скрыть текущее модальное окно
                                                                                                              $(id_modal_1).modal('hide');
                                                                                                            });
                                                                                                            // при скрытии текущего модального окна открыть другое, если значение переменной show_modal_2 равно true
                                                                                                            $(id_modal_1).on('hidden.bs.modal', function (e) {
                                                                                                              if (show_modal_2) {
                                                                                                                show_modal_2 = false;
                                                                                                                $(id_modal_2).modal('show');
                                                                                                              }
                                                                                                            })
                                                                                                           
                                                                                                          }('#modal_1','#modal_2');
                                                                                                          
                                                                                                          two_modal('#modal_1', '#modal_2');
                                                                                                          two_modal('#modal_2', '#modal_1');
                                                                                                          two_modal('#modal_2', '#modal_3');
                                                                                                          two_modal('#modal_3', '#modal_2');
                                                                                                          two_modal('#modal_3', '#modal_4');
                                                                                                          
                                                                                                          });
                                                                                                          </script>
                                                                                                      1. Александр Мальцев
                                                                                                        13 октября 2018, 17:25
                                                                                                        Добрый! Добавил демку и ссылку на неё в статью.
                                                                                                        Если нужно что-то более сложное, то можно посмотреть ещё здесь.
                                                                                            2. Владимир
                                                                                              12 июля 2017, 21:48
                                                                                              Добрый день!

                                                                                              И всё-таки: можно ли вызвать модальное окно без использования JS — допустим с помощью неких «хитрых» data-атрибутов? Понятно, что оно будет всплывать каждый раз при загрузке страницы, но мне именно этого и хотелось бы.

                                                                                              Спасибо.
                                                                                              1. Евегний
                                                                                                05 июля 2017, 12:52
                                                                                                Добрый день Александр! Возник вопрос, создаю модальное окно для формы обратной связи, и проблема в том что на других страницах везде работает, а на главной не работает, и непонятно что блочит запуск, не можете посмотреть и помочь разобраться в чем же проблема в файле хостс надо поправить только 91.218.228.184 telfa.ru
                                                                                                1. Евегний
                                                                                                  05 июля 2017, 13:48
                                                                                                  Если есть такая возможность, напишите пожалуйста мне в вк или на почту vk.com/pympyy pympyy@mail.ru, на данный момент кнопка скрыта на главной
                                                                                                2. Roman
                                                                                                  23 июня 2017, 21:31
                                                                                                  Создал рабочую форму на основе itchief.ru/lessons/php/feedback-form-for-website, вывел в модальном окне

                                                                                                  При нажатии на кнопку отправить появляется зеленая галочка, но ничего не происходит, хотя без окна на странице сайта форма полностью рабочая.
                                                                                                  В чем может быть причина?
                                                                                                  1. Александр Мальцев
                                                                                                    27 июня 2017, 15:15
                                                                                                    Так сложно сказать. Вот пример, в котором форма, работает через модальное окно. Возьми её за основу.
                                                                                                    1. Виталий
                                                                                                      01 июля 2017, 12:41
                                                                                                      Александр! Очень хорошая форма в примере. А как сделать, чтобы была опция «Забыл пароль» в том же коде? Спасибо!
                                                                                                      1. Александр Мальцев
                                                                                                        01 июля 2017, 14:12
                                                                                                        Спасибо! Если вам необходимо использовать одно модальное окно для отображения нескольких форм, то можете посмотреть этот пример.
                                                                                                  2. Владимир
                                                                                                    11 июня 2017, 17:48
                                                                                                    Добрый день. Пишу сайт на django с применением бутстрапа. Пытаюсь вставить стандартную форму джанго отправки сообщения. При нажатии на кнопку окно открывается, но поля в форме, в которых посетитель должен вводить данные не активные. Подскажите, плиз, что может быть не так?
                                                                                                    1. Aleksandr Ustinov
                                                                                                      06 июня 2017, 05:00
                                                                                                      Шеф! Помогите, при размещении кода модального окна
                                                                                                      <!-- Модальное окно -->
                                                                                                      <div class="modal fade" id="text_39" tabindex="-1" role="dialog">
                                                                                                        <div class="modal-dialog modal-lg">
                                                                                                          <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><span style="font-size: 120%;">Маленький Эрудит готовит дошколят в лучшие школы города с 2001 года</span></p>
                                                                                                      <p><span style="font-size: 120%;">Квалифицированный, стабильный коллектив педагогов-профессионалов, мы найдем общий язык с любым малышом</span></p>
                                                                                                      <p><span style="font-size: 120%;">Открытые занятия- лучшая гарантия уверенности в качестве обучения</span></p>
                                                                                                      <p><span style="font-size: 120%;">Занятия  в игровой форме прививают интерес к знаниям, обеспечивая легкость их усвоения</span></p>
                                                                                                      <p><span style="font-size: 120%;">Удобная и гибкая система оплаты доступная всем</span></p>
                                                                                                      <p><span style="font-size: 120%;">Разностороннее развитие ребенка гарантированно комплексом занятий</span></p>
                                                                                                      <p><span style="font-size: 120%;">Театрализованные праздники проходят на уровне сценических представлений</span></p>
                                                                                                      <p><span style="font-size: 120%;">Бесплатные консультации с психологом и логопедом</span></p>
                                                                                                      <p><span style="font-size: 120%;">Индивидуальные занятия по чтению, математике, письму, с логопедом - всписке наших услуг</span></p>
                                                                                                      <p><span style="font-size: 120%;">Творческие кружки - "Волшебная кисточка", " Умелые ручки", "Веселый камочек" пользуется интересом у детей</span></p>
                                                                                                      <p><span style="font-size: 120%;">И самое главное.</span></p>
                                                                                                      <p><span style="font-size: 120%;">Детский центр "Маленький Эрудит" - это свой маленький мир для каждого ребенка, где его искренне любят, уважают и всегда ждут! </span></p>
                                                                                                      <p></p>
                                                                                                      
                                                                                                      		  </div>
                                                                                                            <!--  footer-->
                                                                                                            <div class="modal-footer">
                                                                                                      		  <a href="znajki.html"  data-toggle="modal" title=""class="btn btn-default" >Перейти на страницу Уважаемые Папы и Мамы <span class=""></span> </a>
                                                                                                      		         <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                                                                                              </div>
                                                                                                          </div>
                                                                                                        </div>
                                                                                                      </div>
                                                                                                      
                                                                                                      слетает работа всех скриптов на сайте, ссылки, кнопки, анимашки…
                                                                                                      1. Александр Мальцев
                                                                                                        06 июня 2017, 12:30
                                                                                                        Тут надо смотреть не HTML код, а какая ошибка и в каком месте возникает в JavaScript.
                                                                                                        1. Aleksandr Ustinov
                                                                                                          07 июня 2017, 17:32
                                                                                                          Методом проб выяснил проблему, у меня MODX контент в modal выводится с помощью ditto(я думаю это вам знакомо) При выводе стоит introtext происходит ошибка, если ставлю другой параметр, например alias то все работает, в шаблоне ditto прописан только этот параметр без классов и всего остального Сайт на чистом бутсрапе
                                                                                                          1. Александр Мальцев
                                                                                                            09 июня 2017, 17:06
                                                                                                            Не знаю, MODX Evo не использую.
                                                                                                      2. LFV
                                                                                                        29 мая 2017, 14:58
                                                                                                        Здравствуйте! Помогите, пожалуйста, реализовать модальные окна как на это сайте —
                                                                                                        redside.kupitekvartiru.com/ в разделе планировки. Не совсем понятно, как часть информации (картинка и текст) сделать динамической в зависимости от выбора планировки, а часть — форму — статической.
                                                                                                        1. Александр Мальцев
                                                                                                          29 мая 2017, 16:31
                                                                                                          Уже столько примеров на эту тему, и в этой статье в комментариях, и на этой странице. Так что выбирай какой понравится.
                                                                                                        2. iasem
                                                                                                          18 мая 2017, 10:13
                                                                                                          Добрый день! На сайте есть модальное окно, информация в которое загружается при клике на кнопку. Информация динамическая. Мне нужно чтобы одна информация всегда была отображена в окне. Но при добавлении ее в modal-body ничего не отображается. Прошу помощи
                                                                                                          1. Александр Мальцев
                                                                                                            20 мая 2017, 00:43
                                                                                                            Добрый! Много примеров есть в статье Динамическое создание модальных окон.
                                                                                                          2. Сергей
                                                                                                            12 мая 2017, 17:39
                                                                                                            Александр добрый подскажите как заставить корректно отображаться input select d в модальном окне
                                                                                                            <div class="modal fade" id="myModal-schedule" role="dialog">
                                                                                                                  <div class="modal-dialog">
                                                                                                            
                                                                                                                  <!-- Modal content-->
                                                                                                                     <div class="modal-content">
                                                                                                                       <div class="modal-header">
                                                                                                                       <button type="button" class="close" data-dismiss="modal">×</button>
                                                                                                                       <h4 class="modal-title">{% trans "Встреча" %}</h4>
                                                                                                                     </div>
                                                                                                                         <form method="post" role="form">
                                                                                                                    <div class="modal-body">
                                                                                                                        {% csrf_token %}
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="fio_user">Ф/И</label>
                                                                                                                            <input type="text" class="form-control" id="fio_user">
                                                                                                                        </div>
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="method-meeting">Метод связи:</label>
                                                                                                                            <select class="form-control" id="method-meeting">
                                                                                                                                <option value="1">Скайп</option>
                                                                                                                                <option value="2">Телефон</option>
                                                                                                                            </select>
                                                                                                                        </div>
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="meeting-description">Описание встречи:</label>
                                                                                                                            <textarea class="form-control" id="meeting-description"></textarea>
                                                                                                                        </div>
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="time-meeting">Время встречи:</label>
                                                                                                                             <div class='input-group date' id='datetimepicker'>
                                                                                                                                <input type='text' class="form-control" id="time-meeting"/>
                                                                                                                                <span class="input-group-addon">
                                                                                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                                                                                </span>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                             </form>
                                                                                                                    <div class="modal-footer">
                                                                                                                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                    </div>
                                                                                                                  </div>
                                                                                                                </div>
                                                                                                              </div>
                                                                                                            
                                                                                                            при открытии окна select схлопывается в 0px и естесвенно его не видно и выбрать нельзя!
                                                                                                            в последний div пытаюсь заставить работь с datapicker тоже не получатся инициализировать скрипт
                                                                                                            $(function () {
                                                                                                                            $('#datetimepicker').datetimepicker();
                                                                                                                        });
                                                                                                            
                                                                                                            Заранее благодарен
                                                                                                            Pfhfytt ,kfujlfhty
                                                                                                            1. Александр Мальцев
                                                                                                              13 мая 2017, 05:33
                                                                                                              Не знаю с чем это может быть связано. Это дело не в разметке, а в стилях CSS или сценарии JavaScript, который это делает.
                                                                                                              Для того чтобы вы могли инициализировать datetimepicker, необходимо подключить соответствующий плагин. Всё это необходимо делать в следующем порядке: jquery -> jquery-плагин datetimepicker -> ваш скрипт.
                                                                                                            2. Alex
                                                                                                              25 апреля 2017, 13:20
                                                                                                              Добрый.

                                                                                                              Спасибо за труды.

                                                                                                              Подскажите, как держать модальное окно постоянно открытым для редактирования.
                                                                                                              Использую SublimeText и после каждого обновления index или css окно закрывается и приходится щелкать на кнопку для вызова модального окна.
                                                                                                              1. Александр Мальцев
                                                                                                                26 апреля 2017, 02:47
                                                                                                                Здравствуйте! Спасибо. Попробуйте добавить к модальному окну атрибут:
                                                                                                                data-backdrop="static"
                                                                                                              2. Света
                                                                                                                21 апреля 2017, 16:37
                                                                                                                Спасибо за статью. Есть вопрос, по умолчанию темный фон за модальным окном не появляется. Прописывала с помощью data-backdrop и javascript, темный фон не появляется.
                                                                                                                <script>
                                                                                                                $(document).ready(function(){
                                                                                                                 $('#myModal').modal({ 
                                                                                                                  backdrop: true
                                                                                                                });
                                                                                                                </script>		       
                                                                                                                <!-- Кнопка, вызывающее модальное окно -->
                                                                                                                <a href="#myModal" class="button" class="open-modal" data-toggle="modal" data-backdrop=true><i class="fa fa-envelope"></i>  <?php echo $button_mail; ?></a>  
                                                                                                                <!-- HTML-код модального окна -->
                                                                                                                <div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                                                                                  <div class="modal-dialog modal-sm">
                                                                                                                      <form method="post" name="uvedomlenie" enctype="multipart/form-data">
                                                                                                                    <div class="modal-content" style="font-size:15px;">
                                                                                                                      <!-- Заголовок модального окна -->
                                                                                                                      <div class="modal-header" style="background:#99CCFF!important; color:#fff; text-align:center;">
                                                                                                                        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
                                                                                                                        <h4 class="modal-title"><?php echo $entry_form; ?></h4>
                                                                                                                      </div>
                                                                                                                      <!-- Основное содержимое модального окна -->
                                                                                                                       
                                                                                                                      <div class="modal-body" style="text-align:center; "> 
                                                                                                                <div class="form-group">
                                                                                                                            <input type="text" name="fio" class="input" placeholder="<?php echo $text_fio; ?>">
                                                                                                                      </div>
                                                                                                                     
                                                                                                                     <div class="form-group">       
                                                                                                                            <input type="text" name="phone" class="input" placeholder="<?php echo $text_phone; ?>">
                                                                                                                            </div>
                                                                                                                     <div class="form-group">      
                                                                                                                            <input type="email" name="email" class="input" placeholder="<?php echo $text_email; ?>">
                                                                                                                            </div>
                                                                                                                   <div class="form-group">        
                                                                                                                            <input type="text" name="kolvo" class="input" placeholder="<?php echo $text_kolvo; ?>">
                                                                                                                            </div>
                                                                                                                
                                                                                                                </div>
                                                                                                                      <!-- Футер модального окна -->
                                                                                                                      <div class="modal-footer" style="background:#99CCFF!important;">
                                                                                                                        <button type="button" class="btn btn-default" data-dismiss="modal" style="float:left;">Закрыть</button>
                                                                                                                        <button type="button" class="btn btn-default" style="float:right;">Отправить</button>
                                                                                                                      </div>
                                                                                                                  </form>     
                                                                                                                    </div>
                                                                                                                  </div>
                                                                                                                </div>
                                                                                                                1. Александр Мальцев
                                                                                                                  23 апреля 2017, 14:04
                                                                                                                  Тут дело не в модальном окне, а в CSS. Скорее всего, какие-то другие компоненты, которые вы используете на странице, переопределяют стили компонента Bootstrap Modal.
                                                                                                                  Попробуйте добавить в CSS следующее:
                                                                                                                  .modal-backdrop.in {
                                                                                                                    filter: alpha(opacity=50) !important;
                                                                                                                    opacity: .5 !important;
                                                                                                                  }
                                                                                                                  .modal-backdrop {
                                                                                                                    position: fixed !important;
                                                                                                                    top: 0 !important;
                                                                                                                    right: 0 !important;
                                                                                                                    bottom: 0 !important;
                                                                                                                    left: 0 !important;
                                                                                                                    z-index: 1040 !important;
                                                                                                                    background-color: #000 !important;
                                                                                                                  }
                                                                                                                  
                                                                                                                  1. Света
                                                                                                                    25 апреля 2017, 13:52
                                                                                                                    спасибо
                                                                                                                2. Max
                                                                                                                  28 марта 2017, 15:27
                                                                                                                  И еще вопрос, как сделать так чтобы модальное окно закрывалось при нажатии ЛКМ вне модального окна?
                                                                                                                  1. Александр Мальцев
                                                                                                                    28 марта 2017, 16:33
                                                                                                                    Это осуществляется с помощью атрибута backdrop. В статье приведено полное описание данного параметра и его возможные значения.
                                                                                                                    1. Max
                                                                                                                      28 марта 2017, 16:50
                                                                                                                      Спасибо)
                                                                                                                  2. Max
                                                                                                                    28 марта 2017, 15:11
                                                                                                                    Добрый день.
                                                                                                                    itchief.ru/assets/uploadify/a/1/b/a1bc78739573a92ce8d0b006d2e5a354.jpg
                                                                                                                    Помогите разобраться, в чем может быть проблема? При вызове модального окна задний фон (основная страница), контент смещается влево.
                                                                                                                    1. Александр Мальцев
                                                                                                                      28 марта 2017, 16:37
                                                                                                                      Проверьте CSS и воспользуйтесь рекомендациями, приведёнными в начале статьи по размещению модального окна на странице.
                                                                                                                      1. Max
                                                                                                                        28 марта 2017, 16:50
                                                                                                                        Да, действительно при задании width -> modal весь задний фон уплывает.
                                                                                                                    2. Вадим
                                                                                                                      12 марта 2017, 17:53
                                                                                                                      Доброго дня! Подскажите как изменить размер конкретного модального окна на произвольный в px? т.е. не классами, а конкретно прописать размер для отдельного взятого окна. Спасибо!
                                                                                                                      1. Василий
                                                                                                                        12 марта 2017, 18:29
                                                                                                                        Доброго времени суток!
                                                                                                                        А в чем проблема?! Либо css прям в конкретном окне прописываете, либо по его уникальному ID
                                                                                                                        1. Вадим
                                                                                                                          12 марта 2017, 18:37
                                                                                                                          не знаю… может что неправильно делаю… пробовал по id
                                                                                                                          #myModal.modal-dialog {
                                                                                                                          width: 500px!important;
                                                                                                                          }
                                                                                                                          не помогает…
                                                                                                                          1. Василий
                                                                                                                            12 марта 2017, 19:03
                                                                                                                            Ссылку на сайт и где находится окно нужное, указать можете?
                                                                                                                            1. Вадим
                                                                                                                              12 марта 2017, 19:16
                                                                                                                              блин… все решил… очередная невнимательность… лишний пробел был перед кавычками посему и не видел нужный id… спасибо что быстро отвечаете и прошу извинить за свою невнимательность :)
                                                                                                                              1. Василий
                                                                                                                                12 марта 2017, 19:53
                                                                                                                                Да не за что ))) Делайте проверку кода перед заливкой на сервер. Если не ошибаюсь, то вроде как программа phpDesigner такое может. У меня редактор тоже делает проверку и сообщает, если что где не так )) Да и тут о проверке подробно написано itchief.ru/lessons/bootstrap-3/bootstrap-3-tool-bootlint
                                                                                                                      2. Vitaly
                                                                                                                        14 февраля 2017, 23:35
                                                                                                                        Александр, спасибо за ваши труды!
                                                                                                                        Подскажите, пожалуйста, если не затруднит. Хочу реализовать аутентификацию, регистрацию как
                                                                                                                        здесь. Но только чтобы она работала через модальное окно. Пытался сделать следующим образом:
                                                                                                                        <!-- вызываю окно с формой из navbar меню -->
                                                                                                                        <!-- ... -->
                                                                                                                        <a title="Войти" href="#login-modal" style="line-height: 88px;" data-toggle="modal">Войти</a>
                                                                                                                        <!-- ... -->
                                                                                                                        <!-- кусок из моего template: -->
                                                                                                                        <div id="login-modal" class="modal fade">
                                                                                                                          <div class="modal-dialog">
                                                                                                                            <div class="modal-body">  
                                                                                                                              [[!Login? 
                                                                                                                                &tplType=`modChunk`
                                                                                                                                &loginTpl=`myLoginChunk`
                                                                                                                                &logoutTpl=`myLogoutChunk`
                                                                                                                                &errTpl=`lgnErrTpl` 
                                                                                                                                &redirectToPrior=`1`
                                                                                                                              ]]
                                                                                                                        <!-- ... -->
                                                                                                                        
                                                                                                                        Форму myLoginChunk приводить не буду, чтобы не захламлять, т.к. она практически идентична вашей.
                                                                                                                        Все бы замечательно, только после события click (без заполнения полей «Пользователь» и «пароль») на «SignIn» вылетает на главную страницу и при повторном вызове модального окна аутентификации видна ошибка из errTpl, т.е. форма не обновляется.
                                                                                                                        Подскажите, пожалуйста… где только не лазил. Сильно не пинайте новичка )
                                                                                                                        Спасибо!
                                                                                                                        1. Александр Мальцев
                                                                                                                          18 февраля 2017, 02:02
                                                                                                                          Насколько понял, вы это хотите сделать для CMS MODX Revolution с помощью компонента Login. Но, это будет сделать не так просто… Вам придётся создавать клиентский скрипт на языке JavaScript и сниппеты. Клиентский скрипт будет предназначен для отправки данных формы на сервер по AJAX и для отображения на странице результатов. А заниматься обработкой формы и возвращением результатов будет сниппет. Вам необходимо реализовать что-то подобное, как это сделано в статье: itchief.ru/lessons/modx-revo/modx-display-random-articles-with-ajax
                                                                                                                        2. Babets
                                                                                                                          02 февраля 2017, 19:56
                                                                                                                          После экранирования данного скрипта, модальное окно работает.
                                                                                                                          itchief.ru/assets/uploadify/4/7/f/47f3c698ed2a61a9bf027a1dc9058a33.jpg

                                                                                                                          В чем причина? Спасибо.
                                                                                                                          1. Александр Мальцев
                                                                                                                            03 февраля 2017, 16:24
                                                                                                                            Скорее всего, неправильно установлен параметр z-index.
                                                                                                                            Ознакомься с комментариями в этой ветке: itchief.ru/lessons/bootstrap-3/bootstrap-3-modal-window#comment-3892
                                                                                                                            Попробуй установить модальному окну более высокое значение z-index:
                                                                                                                            .modal {
                                                                                                                              z-index: 500000;
                                                                                                                            }
                                                                                                                            
                                                                                                                            1. Babets
                                                                                                                              03 февраля 2017, 18:58
                                                                                                                              Александр. Спасибо за ответ. В данном случае z-index не помогает. Я так понял что дело в скрипте, что на скрине. Когда я его экранирую — все работает, когда скрипт подключаю снова — перестает работать. Буду рыться в скрипте. Спасибо.
                                                                                                                          2. Babets
                                                                                                                            02 февраля 2017, 18:39
                                                                                                                            Добрый день. Возник вопрос по модальному окну.
                                                                                                                            Скриншот: itchief.ru/assets/uploadify/8/f/e/8febf32af7f8eddff1a6db2932bd7c54.jpg
                                                                                                                            Отображается модальное окно под слоем opacity (не кликабельно). Сталкивался кто-нибудь с такой траблой. Прошу помощи. Наперед благодарен.
                                                                                                                            1. Виктория
                                                                                                                              02 февраля 2017, 08:36
                                                                                                                              Здравствуйте, Александр! Как фото отображать в модальном окне. Например, как здесь: ukmed.kz/galery/
                                                                                                                              1. Александр Мальцев
                                                                                                                                03 февраля 2017, 16:16
                                                                                                                                Здравствуйте, для отображения фото на сайте используется плагин PhotoSwipe. Подключаете его и инициализируете с помощью него фото.
                                                                                                                                Если же вам необходимо решение на базе модального окна, то можно сделать так:
                                                                                                                                <!-- Модальное окно -->
                                                                                                                                <div id="modal-image" 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">×</button>
                                                                                                                                        <h4 class="modal-title"></h4>
                                                                                                                                      </div>
                                                                                                                                      <div class="modal-body">
                                                                                                                                        <img class="img-responsive" src="" alt=""></p>
                                                                                                                                      </div>
                                                                                                                                      <div class="modal-footer">
                                                                                                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                                                                                                                      </div>
                                                                                                                                    </div>
                                                                                                                                  </div>
                                                                                                                                </div>
                                                                                                                                <!-- Изображения -->
                                                                                                                                <img class="pic" src="img1.jpg" alt="..." width="100">
                                                                                                                                <img class="pic" src="img2.jpg" alt="..." width="100">
                                                                                                                                <img class="pic" src="img3.jpg" alt="..." width="100">
                                                                                                                                <!-- Скрипт -->
                                                                                                                                <script>
                                                                                                                                $(function() {
                                                                                                                                  $('.pic').click(function(){
                                                                                                                                    $('#modal-image .modal-title').text($(this).attr('alt'));  
                                                                                                                                    $('#modal-image .modal-body img').attr('src',$(this).attr('src'));
                                                                                                                                    $('#modal-image').modal('show');
                                                                                                                                  });
                                                                                                                                });
                                                                                                                                </script>
                                                                                                                                
                                                                                                                                Для изображений, которые необходимо открывать в модальном окне следует добавить класс pic.
                                                                                                                                1. Виктория
                                                                                                                                  07 февраля 2017, 07:11
                                                                                                                                  Что то у меня не получается, картинку я вставила. А модальное окно не открывается (напишите, пожалуйста, что куда вставлять)
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    07 февраля 2017, 17:02
                                                                                                                                    1. HTML-код (до комментария «Изображения») — после открывающего тега body.
                                                                                                                                    2. К необходимым элементам img добавить класс pic, т.е. к тем, которые необходимо отображать в модальном окне
                                                                                                                                    3. Скрипт в любом месте после подключения файла bootstrap.min.js.
                                                                                                                                1. Александр Мальцев
                                                                                                                                  31 января 2017, 16:29
                                                                                                                                  Значит, у вас верхнее меню имеет большее значение свойства z-index чем то, которое установлено модальному окну (по умолчанию 1050).
                                                                                                                                  Здесь 2 варианта решения проблемы:
                                                                                                                                  1. Установить модальному окну большее значение z-index чем меню (или наоборот):
                                                                                                                                  .modal {
                                                                                                                                    z-index: 5000; /* число 5000 должно быть больше чем у меню */
                                                                                                                                  }
                                                                                                                                  
                                                                                                                                  2. Немного сдвинуть модальное окно вниз:
                                                                                                                                  .modal-dialog {
                                                                                                                                    width: 600px;
                                                                                                                                    margin: 100px auto; /* например 100 пикселей от верха */
                                                                                                                                  }
                                                                                                                                  
                                                                                                                                  1. Алексей
                                                                                                                                    31 января 2017, 16:44
                                                                                                                                    Спасибо, опустить получилось) А как можно исправить еще одну проблему. У меня серый фон скрывает модальное окно.
                                                                                                                                    1. Александр Мальцев
                                                                                                                                      31 января 2017, 16:56
                                                                                                                                      Классу .modal-backdrop необходимо установить значение CSS-свойства z-index меньше чем то, которое установлено у модального окна.
                                                                                                                                      .modal-backdrop {
                                                                                                                                        z-index: 100;
                                                                                                                                      }
                                                                                                                                      
                                                                                                                                      1. Алексей
                                                                                                                                        31 января 2017, 21:30
                                                                                                                                        Все стало супер, спасибо)
                                                                                                                                2. Незнайка
                                                                                                                                  07 декабря 2016, 10:21
                                                                                                                                  Не смог реализовать описанный пример с загрузкой модального окна после загрузки страницы.
                                                                                                                                  По кнопке модальное окно открывается, а при загрузке — нет.
                                                                                                                                  Использовался ваш пример.
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    08 декабря 2016, 12:14
                                                                                                                                    Данный скрипт необходимо размещать после подключения библиотеки jQuery и плагина Bootstrap (bootstrap.min.js). Этот момент был описан в уроках уже не раз. Т.е. сначала вы подключаете jquery, после него bootstrap.js (т.к. он использует jQuery), а после него свои скрипты (т.к. они используют и библиотеку jQuery и плагин Bootstrap). Если вы разместите свои скрипты раньше, то произойдёт ошибка. Она будет связана с тем, что функции других скриптов (jquery и bootstrap), которые мы используем в своём скрипте, ещё нет (они ещё не загружены).
                                                                                                                                  2. Larisa
                                                                                                                                    22 октября 2016, 21:25
                                                                                                                                    Здравствуйте, Александр) Подключаю к странице плагин, который применяется к изображению. Неприятность в том, что изображение обязательно должно открываться в модальном окне. Но плагин не работает. Пробую уже модалку открывать через 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. Александр Мальцев
                                                                                                                                      24 октября 2016, 12:37
                                                                                                                                      Если вы используете плагины 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
                                                                                                                                        26 октября 2016, 13:28
                                                                                                                                        большое спасибо)
                                                                                                                                    2. Евгений
                                                                                                                                      20 октября 2016, 07:05
                                                                                                                                      Добрый день, есть блок с 2 ссылками, при нажатии на одну из них должен появляться блок такой же ширины и высоты, как и блок, содержащий 2 эти ссылки. Но он должен отображаться не в модальном окне, а заменять собой блок с 2 ссылками. Т.е. он не должен быть отдельным окном. Никак не могу победить эту часть…
                                                                                                                                      1. Александр Мальцев
                                                                                                                                        20 октября 2016, 13:56
                                                                                                                                        Здравствуйте.
                                                                                                                                        Можно сделать так (используя относительное и абсолютное позиционирование).
                                                                                                                                        Код 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. max
                                                                                                                                        16 октября 2016, 19:54
                                                                                                                                        Получается, что после закрытия модалки, кнопка всегда возвращается в область просмотра (видимости). Как это отменить?
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          18 октября 2016, 12:54
                                                                                                                                          Это стандартное поведение модального окна для устройств с клавиатурой. Т.е. 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. max
                                                                                                                                          16 октября 2016, 19:44
                                                                                                                                          Для примера:
                                                                                                                                          Прокручиваю кнопку, вот в такое положение:
                                                                                                                                          itchief.ru/assets/images/bootstrap/j7s7q.png
                                                                                                                                          Нажимаю, появляется модалка:
                                                                                                                                          itchief.ru/assets/images/bootstrap/fi3wc.png
                                                                                                                                          Закрываю модалку, страница прокрутилась:
                                                                                                                                          itchief.ru/assets/images/bootstrap/nlfxd.png
                                                                                                                                          Тоже происходит и у меня только в больших масштабах…
                                                                                                                                          1. max
                                                                                                                                            16 октября 2016, 19:24
                                                                                                                                            Есть форма (очень длинная на страницу не помещается) в которой происходит валидация, и возможность предварительного просмотра контента, который ввел пользователь. Превью выводится модалкой. В самой модалке есть кнопка отправить. Если пользователь не заполнил поле, страница прокручивается к этому полю, но затем опять прыгает вниз к кнопке вызывающей модалку.
                                                                                                                                            1. max
                                                                                                                                              16 октября 2016, 19:24
                                                                                                                                              Большое спасибо что ответили!
                                                                                                                                              1. max
                                                                                                                                                15 октября 2016, 16:06
                                                                                                                                                P.S. Прокрутка происходит после закрытия модалки.
                                                                                                                                                1. max
                                                                                                                                                  15 октября 2016, 16:02
                                                                                                                                                  Добрый Вечер! Надеюсь, вы сможете мне помочь. Можно ли как-то отменить прокрутку к кнопке, которая открыла модалку? Даже на ваших примерах прокрутка есть. Заранее спасибо!
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    16 октября 2016, 13:06
                                                                                                                                                    Можете более подробно пояснить или приложить изображения. А то не совсем понятно, о чём идёт речь…
                                                                                                                                                  2. Леонид
                                                                                                                                                    08 октября 2016, 06:57
                                                                                                                                                    Подскажите, а можно ли как то вызвать модальное окно ссылкой?
                                                                                                                                                    Например, добавив к адресу "#modal" или как то еще?
                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                      10 октября 2016, 11:21
                                                                                                                                                      В статье есть такой пример (где myModal — id модального окна, которое необходимо открыть):
                                                                                                                                                      <!-- Кнопка, вызывающее модальное окно -->
                                                                                                                                                      <a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>
                                                                                                                                                      
                                                                                                                                                      Если необходимо это сделать после перехода на страницу, то надо написать скрипт:
                                                                                                                                                      $(function(){
                                                                                                                                                        if (location.hash == '#modal') {
                                                                                                                                                          $('#modal').modal('show');
                                                                                                                                                        }
                                                                                                                                                      });
                                                                                                                                                      
                                                                                                                                                      Т.е. получить хэш страницы и сравнить его с #modal. Если он равен, то открыть модальное окно.
                                                                                                                                                      1. Евгений
                                                                                                                                                        12 сентября 2017, 18:00
                                                                                                                                                        Установил данный скрипт, но, к сожалению, не срабатывает, не подскажите, в чем может быть причина?
                                                                                                                                                        landpg.zzz.com.ua/#portfolioModal2
                                                                                                                                                        1. Василий
                                                                                                                                                          12 сентября 2017, 18:43
                                                                                                                                                          У вас ошибки в консоли
                                                                                                                                                          Uncaught TypeError: Cannot read property 'msie' of undefined
                                                                                                                                                              at jquery.fancybox-1.3.4.pack.js:18
                                                                                                                                                              at jquery.fancybox-1.3.4.pack.js:46
                                                                                                                                                          (index):1409 Uncaught SyntaxError: Invalid or unexpected token
                                                                                                                                                          (index):1357 Uncaught TypeError: $(...).fancybox is not a function
                                                                                                                                                              at HTMLDocument.<anonymous> ((index):1357)
                                                                                                                                                              at i (jquery.min.js:2)
                                                                                                                                                              at Object.fireWith [as resolveWith] (jquery.min.js:2)
                                                                                                                                                              at Function.ready (jquery.min.js:2)
                                                                                                                                                              at HTMLDocument.K (jquery.min.js:2)
                                                                                                                                                          /favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
                                                                                                                                                    2. Антон
                                                                                                                                                      05 октября 2016, 13:23
                                                                                                                                                      Добрый день!
                                                                                                                                                      Скажите, вот вы тут написали код для кнопки и модального окна. Вопрос, где стили? Просьба выложить отдельно файл со стилями для кнопки и формы модального окна. Спасибо.
                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                        06 октября 2016, 10:05
                                                                                                                                                        Здравствуйте.
                                                                                                                                                        Это кнопка и модальное окно фреймворка Bootstrap. Если вам нужны не только эти элементы, а весь набор данной платформы, то скачайте её. Информацию о том, как это сделать, можно почитать в этой статье Установка платформы Twitter Bootstrap.

                                                                                                                                                        Если вам нужны только эти конкретные элементы, то перейдите на страницу _http://getbootstrap.com/customize/ и выберите только нужные. Потом пролистайте данную страницу вниз, нажмите кнопку и получите платформу, состоящую только из этих компонентов. Если Вам необходимо выдернуть эти стили, то откройте файл bootstrap.css (не сжатый) и скопируйте необходимые строчки в свой файл стилей. Он кроме кнопок, будет содержать ещё и базовые стили. Если они вам не нужны, то прокрутите содержимое файла до кнопок и скопируйте их. То же самое необходимо выполнить и для модального окна. Приводить содержимое CSS не буду, т.к. надеюсь, что довольно подробно описал, что надо сделать. Для работы модального окна необходим ещё код javascript, он находится в несжатом виде в файле bootstrap.js. Можете тоже его просто скопировать себе в свой файл скриптов или подключить так.
                                                                                                                                                      2. ToItchief
                                                                                                                                                        27 сентября 2016, 13:05
                                                                                                                                                        Добрый день, подскажите, пожалуйста, как сделать, никак не могу понять. У меня есть модальное окно, в котором расположена форма, и в которой прописан 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
                                                                                                                                                          27 сентября 2016, 13:10
                                                                                                                                                          Уже разобрался, нужно поменять:
                                                                                                                                                          <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. Игорь
                                                                                                                                                          23 сентября 2016, 08:34
                                                                                                                                                          Здравствуйте. Вопрос нестандартный. Можно ли управлять отображением модального окна через адресную строку?
                                                                                                                                                          То есть, к примеру, есть site.ru и 2 окна — #modal1 и #modal2. И чтобы, к примеру, посещая site.ru/?q=#modal1 — сайт открылся с уже показанным окном #modal1.
                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                            24 сентября 2016, 13:17
                                                                                                                                                            Здравствуйте. Конечно можно.
                                                                                                                                                            Используйте в 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. Игорь
                                                                                                                                                              24 сентября 2016, 13:51
                                                                                                                                                              Спасибо огромное!
                                                                                                                                                          2. Андрей
                                                                                                                                                            17 сентября 2016, 15:51
                                                                                                                                                            Здравствуйте, подскажите, что к этому коду необходимо добавить, чтобы окно открывалось только по субботам и воскресеньям и при заходе на сайт с задержкой в 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. Александр Мальцев
                                                                                                                                                              18 сентября 2016, 10:05
                                                                                                                                                              Будет так:
                                                                                                                                                              $(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. Александр
                                                                                                                                                              13 сентября 2016, 19:56
                                                                                                                                                              Одно и то же модальное окно на десктопах нормально сразу открывается по клику, а на айпаде открывается только после второго клика по ссылке. И потом на айпаде либо сразу же закрывается само, либо его вообще никак не закрыть без перезагрузки страницы. В какую сторону копать?
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                13 сентября 2016, 22:34
                                                                                                                                                                Попробуйте обновиться на самую последнюю версию Bootstrap.
                                                                                                                                                              2. Ксюша
                                                                                                                                                                29 августа 2016, 06:08
                                                                                                                                                                Доброе утро
                                                                                                                                                                Спасибо, так помогла ваша инфо о модальном окне. Как раз то, что нужно было для моей задумки!!! Но беда, окно не хочет срабатывать в firefox.
                                                                                                                                                                Посмотрите, пожалуйста, что я неправильно сделала lyguta.inf.ua
                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                  29 августа 2016, 08:29
                                                                                                                                                                  Вы что-то сильно перемудрили с элементами.
                                                                                                                                                                  Не надо в элемент 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. Ксюша
                                                                                                                                                                    29 августа 2016, 08:39
                                                                                                                                                                    Заработало!!! Спасибо огромное!!!
                                                                                                                                                                2. Игорь
                                                                                                                                                                  27 августа 2016, 18:07
                                                                                                                                                                  Добрый день.
                                                                                                                                                                  Использую одно модальное окно для редакции данных моделей. Когда открывается модальное окно, должны поменяться данные в форме и др. для конкретной модели. Это все сделал через скрипт.
                                                                                                                                                                  Скрипт:
                                                                                                                                                                  $('#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. Александр Мальцев
                                                                                                                                                                    28 августа 2016, 05:26
                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                    То, что Вы описали, не может случиться мгновенно.
                                                                                                                                                                    1 Вариант. Можно сделать так, как Вы это сделали выше. Т.е. сразу отображать модальное окно. Но немного изменить код, а именно: добавить какую-нибудь вращающуюся иконку и как только данные придут с сервера, убрать иконку и отобразить данные.
                                                                                                                                                                    2 Вариант. Повесить обработчик не на открытие формы, а на элемент, с помощью которого Вы открываете модальное окно. В этом обработчике сначала получить данные с сервера, обновить код модального окна, а потом его открыть. Если задержка при получении данных невелика, то пользователь этого не заметит.
                                                                                                                                                                    $('#modaledite').modal('show');
                                                                                                                                                                    
                                                                                                                                                                    1. Игорь
                                                                                                                                                                      30 августа 2016, 02:43
                                                                                                                                                                      Огромное вам спасибо за совет. Сделал по второму варианту. Только недавно начал практиковать 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. Александр Мальцев
                                                                                                                                                                        31 августа 2016, 13:18
                                                                                                                                                                        Нормальный код, только желательно бы его отформатировать.
                                                                                                                                                                        1. Игорь
                                                                                                                                                                          31 августа 2016, 22:07
                                                                                                                                                                          Спасибо за внимание.
                                                                                                                                                                  2. макс
                                                                                                                                                                    22 августа 2016, 09:33
                                                                                                                                                                    Добрый день!
                                                                                                                                                                    Подскажите, как можно сделать следующее: внутри модального окна есть ссылка:
                                                                                                                                                                    <a href="#contact">Текст ссылки</a>
                                                                                                                                                                    
                                                                                                                                                                    Как сделать, чтобы при нажатии на неё, модульное окно «пропадало»? Спасибо.
                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                      24 августа 2016, 12:04
                                                                                                                                                                      Написать скрипт:
                                                                                                                                                                      // contact - id кнопки внутри модального окна
                                                                                                                                                                      // myModal - id модального окна
                                                                                                                                                                      $(function(){
                                                                                                                                                                        $('#contact').click(function(){
                                                                                                                                                                          $('#myModal').modal('hide');
                                                                                                                                                                        });
                                                                                                                                                                      });
                                                                                                                                                                      
                                                                                                                                                                    2. Игорь
                                                                                                                                                                      11 августа 2016, 07:29
                                                                                                                                                                      Здравствуйте! Подскажите, в чем может быть проблема. При установке любого модального окна, открываются сразу два окна.
                                                                                                                                                                      itchief.ru/assets/uploadify/6/a/5/6a5406a3b0bdb260c10fb4b4d56c24e9.png
                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                        11 августа 2016, 14:10
                                                                                                                                                                        Если Вы используете data-атрибуты, то у кнопки, открывающей модальное окно, в качестве значения атрибута data-target должен быть указан селектор (например, #myModal) который бы однозначно определять то модальное окно (id=''myModal''), которое необходимо открыть.

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

                                                                                                                                                                        Чтобы разобраться с этим вопросом, можно почитать статью про CSS селекторы.
                                                                                                                                                                      2. Юрий
                                                                                                                                                                        06 августа 2016, 09:45
                                                                                                                                                                        Добрый день! Спасибо за полезную статью.
                                                                                                                                                                        Подскажите, у меня в модальном окне вставлена форма обратной связи.
                                                                                                                                                                        В форме есть проверка на неправильно введенный e-mail.
                                                                                                                                                                        Если пользователь заполнит форму и нажмет «Отправить», то модальное окно скрывается.
                                                                                                                                                                        А как сделать так, чтобы окно не скрывалось, ведь пользователь должен увидеть, что e-mail указан не верно.
                                                                                                                                                                        Либо если указал верно, то он должен увидеть сообщение, что форма отправлена, но он не видит этого, так как модальное окно закрывается.
                                                                                                                                                                        Спасибо!
                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                          08 августа 2016, 13:20
                                                                                                                                                                          Чтобы это осуществить необходимо, использовать AJAX.
                                                                                                                                                                          Посмотреть, как это можно выполнить можно в статье Выезжающая форма обратной связи.
                                                                                                                                                                        2. Fox
                                                                                                                                                                          04 августа 2016, 12:38
                                                                                                                                                                          В этом и прикол, у меня 3.3.7 с getbootstrap.com. А русский сайт, я привёл для наглядности.
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            04 августа 2016, 13:00
                                                                                                                                                                            Попробуйте разместить код модального окна в соответствии с рекомендацией, изложенной в начале статьи (особенности компонента modal), т.е. сразу после открывающего тега body.
                                                                                                                                                                          2. Fox
                                                                                                                                                                            03 августа 2016, 18:39
                                                                                                                                                                            Здравствуйте! Подскажите, пожалуйста, почему не добавляется «padding-right:17(15)px» при открытии модельного окна, а добавляется «padding-right:0px». При открытии сайт дергается вправо, вроде де же bootstrap должен рассчитывать ширину скролла и в зависимости от того добавлять или нет padding-right?
                                                                                                                                                                            Например, на этом сайте _http://bootstrap-3.ru/javascript.php#modals" есть эта проблема. Т.е. при открытии демо модального окна добавляется «padding-right:0px» и сайт дергает вправо. А вот на http://getbootstrap.com... сайте такого нет, там добавляется «padding-right:17px» и всё в порядке. Что там, что тут используется один и тот же «bootstrap.js».
                                                                                                                                                                            Спасибо.
                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                              04 августа 2016, 12:02
                                                                                                                                                                              А с чего Вы взяли, что они используют одинаковую версию бутстрап. На официальном сайте последняя на текущий момент версия (3.3.7). На русском используется довольно старая версия (3.1.1). В этом и проблема.
                                                                                                                                                                            2. Андрей
                                                                                                                                                                              26 июля 2016, 00:45
                                                                                                                                                                              Здравствуйте, Александр.
                                                                                                                                                                              А как сделать окно фиксированной высоты/ширины. Я в окно вывожу список
                                                                                                                                                                              <ul>
                                                                                                                                                                              и элементы списка периодически добавляются.
                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                26 июля 2016, 09:34
                                                                                                                                                                                С помощью 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. Иван
                                                                                                                                                                                22 июля 2016, 11:38
                                                                                                                                                                                Здравствуйте, Александр.
                                                                                                                                                                                Не подскажете, как сделать так, чтобы скрипт запускался только на больших экранах? Модальное окно появляется при заходе пользователя на страницу.
                                                                                                                                                                                $(window).load(function(){
                                                                                                                                                                                  $('#slider-modal').modal('show');
                                                                                                                                                                                });
                                                                                                                                                                                
                                                                                                                                                                                Соответственно кнопки, которую можно скрыть нету =(
                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                  22 июля 2016, 12:23
                                                                                                                                                                                  Проверить ширину документа и если он больше 1200px (lg), то тогда открывать:
                                                                                                                                                                                  $(window).load(function(){
                                                                                                                                                                                    if ($(document).width()>=1200) {
                                                                                                                                                                                      $('#slider-modal').modal('show');
                                                                                                                                                                                    }
                                                                                                                                                                                  });
                                                                                                                                                                                  
                                                                                                                                                                                  1. Иван
                                                                                                                                                                                    22 июля 2016, 12:30
                                                                                                                                                                                    Спасибо, заработало =)
                                                                                                                                                                                2. Alexey
                                                                                                                                                                                  08 июля 2016, 10:15
                                                                                                                                                                                  Здравствуйте!
                                                                                                                                                                                  Очень нужна помощь: не соображу, как создать такое модальное окно, которое бы всплывало при первом входе посетителя на сайт, блокировало бы сайт и не закрывалось, пока посетитель не кликнет по кнопке в модальном окне. Это нужно для подтверждения, что посетителю исполнилось 18, а если он не подтвердит, то сайт для него не будет доступен.
                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                    10 июля 2016, 12:36
                                                                                                                                                                                    Для этого необходимо к модальному окну добавить параметры: 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. Иван
                                                                                                                                                                                    27 июня 2016, 15:40
                                                                                                                                                                                    Добрый день Александр!
                                                                                                                                                                                    Спасибо Вам за Ваши труды, очень всем помогаете! ))
                                                                                                                                                                                    Подскажите, пожалуйста, как решить задачку: Необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом. При этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано). Пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно ))
                                                                                                                                                                                    Вот собственно пример.
                                                                                                                                                                                    Код
                                                                                                                                                                                    <script>
                                                                                                                                                                                    (function($) {
                                                                                                                                                                                    $(function() {
                                                                                                                                                                                      // Проверим, есть ли запись в куках о посещении посетителя
                                                                                                                                                                                      // Если запись есть - ничего не делаем
                                                                                                                                                                                      if (!$.cookie('was')) {
                                                                                                                                                                                        // Покажем всплывающее окно
                                                                                                                                                                                        $('#boxUserFirstInfo').arcticmodal({
                                                                                                                                                                                          closeOnOverlayClick: false,
                                                                                                                                                                                          closeOnEsc: true
                                                                                                                                                                                        });
                                                                                                                                                                                      }
                                                                                                                                                                                      // Запомним в куках, что посетитель к нам уже заходил
                                                                                                                                                                                      $.cookie('was', true, {
                                                                                                                                                                                        expires: 365,
                                                                                                                                                                                        path: '/'
                                                                                                                                                                                      });
                                                                                                                                                                                    })
                                                                                                                                                                                    })(jQuery) 
                                                                                                                                                                                    </script>

                                                                                                                                                                                    Помогите, пожалуйста, реализовать данную функцию?
                                                                                                                                                                                    Буду очень рад Вашей помощи! Уж очень выручите ))
                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                      02 июля 2016, 11:18
                                                                                                                                                                                      Здравствуйте, Иван.
                                                                                                                                                                                      В JavaScript невозможно определить на каком расстоянии курсор находится от кнопки закрытия вкладки страницы или браузера. Следовательно, реализовать подобный функционал просто не представляется возможным.
                                                                                                                                                                                      1. Иван
                                                                                                                                                                                        02 июля 2016, 11:26
                                                                                                                                                                                        Добрый день Александр!
                                                                                                                                                                                        Ну а если вариант, при попытке закрыть вкладку браузера?
                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                          02 июля 2016, 11:49
                                                                                                                                                                                          Думаю и это в настоящее время не возможно. Т.к. большинство браузеров попросту игнорируют результат события onbeforeunload, которое происходит перед выгрузкой страницы. Т.е. Вы не сможете предотвратить закрытие вкладки, если пользователь этого захочет.
                                                                                                                                                                                          1. Иван
                                                                                                                                                                                            29 августа 2017, 19:17
                                                                                                                                                                                            Добрый день
                                                                                                                                                                                            А если привязать функцию, когда курсор уходит за пределы окна, боди например, показывается окно. Т.е. увели курсор в направлении закрытия страницы, только он дошел до верха _ сразу модал
                                                                                                                                                                                            1. Иван
                                                                                                                                                                                              02 июля 2016, 14:10
                                                                                                                                                                                              Спасибо за информацию, Александр! Скажите, а как сделать так, чтобы модальное окно появлялась, скажем, через 60 секунд после загрузки страницы. Но появлялась всего один раз для каждого нового пользователя, чтобы проверялись куки файлы на наличие ранних посещений пользователя.
                                                                                                                                                                                              if (!$.cookie('was')) {
                                                                                                                                                                                              и после запоминалось это посещение, чтобы больше окно для такого пользователя не появлялось…
                                                                                                                                                                                              // Запомним в куках, что посетитель к нам уже заходил
                                                                                                                                                                                              $.cookie('was', true, {
                                                                                                                                                                                                expires: 365,
                                                                                                                                                                                                path: '/'
                                                                                                                                                                                              });
                                                                                                                                                                                              буду очень благодарен за помощь, если такой вариант возможен, конечно.
                                                                                                                                                                                      2. Сергей Коваленко
                                                                                                                                                                                        24 июня 2016, 12:06
                                                                                                                                                                                        Здравствуйте) Подскажите, как сделать чтобы при нажатии на ссылку с классом ".btn" открывалось модальное окно с картинкой и описанием. А при нажатии на неё средней клавишей мыши или же через правую клавишу -> открыть ссылку в новой вкладке (окне) открывалась просто картинка. HTML содержит у меня сейчас следующее.
                                                                                                                                                                                        HTML-код...
                                                                                                                                                                                        <figure>
                                                                                                                                                                                          <img class="img-responsive" src="images/portfolio/folio01.jpg" alt="">
                                                                                                                                                                                          <figcaption>
                                                                                                                                                                                            <h5>...</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>...</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.
                                                                                                                                                                                        Собственно с модальным окном все OK. Но, при открытии в новой вкладке открывается только ссылка сайта+ID в href.
                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                          27 июня 2016, 12:55
                                                                                                                                                                                          Добавить идентификатор к изображению и кнопки:
                                                                                                                                                                                          <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. Сергей Коваленко
                                                                                                                                                                                            28 июня 2016, 16:47
                                                                                                                                                                                            Спасибо огромное, работает. Но, к примеру, у меня может быть много таких картинок на странице и к каждому привязано модальное окно. Как изменить в таком случае код скрипта? Просто к каждой картинке и кнопке присваивать один и тот же ID как бы не позволяет валидатор wc3, «кричит» что ID повторяется.
                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                              02 июля 2016, 12:36
                                                                                                                                                                                              Если у Вас картинок много, то Вам необходимо при нажатии на кнопку определить изображение, которое связано с ним. Модальное окно желательно использовать одно, т.к. Вы можете изменить его содержимое, перед тем как вывести.
                                                                                                                                                                                              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. сергей
                                                                                                                                                                                          19 июня 2016, 07:06
                                                                                                                                                                                          Здравствуйте! Как сделать, что бы модальное окно для одного ip появлялась раз в сутки? Т.е. если человек уже видел это окно (по его айпи), то больше его в эти сутки не показывать. Окно появляется сразу при переходе на сайт. Возрастное ограничение. Спасибо за ответ или за ссылки, где это уже обсуждалось.
                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                            19 июня 2016, 09:32
                                                                                                                                                                                            Здравствуйте.
                                                                                                                                                                                            Зачем такие сложности, тем более что несколько пользователей могут иметь один ip. Т.е. Вам необходимо будет иметь базу данных, где необходимо будет хранить ip адреса, дату отображения модального окна и т.д.
                                                                                                                                                                                            Лучше использовать для этого cookie или LocalStorage браузера пользователя. Т.е. заводите в хранилище браузера пользователя параметр, например, showModal и сохраняете в качестве его значения дату показа модального окна. Если дата не соответствует текущей, то отображаете модальное окно, иначе не показываете.
                                                                                                                                                                                            Как это сделать, можно посмотреть в этом комментарии.
                                                                                                                                                                                            1. сергей
                                                                                                                                                                                              19 июня 2016, 10:37
                                                                                                                                                                                              Да отлично всё поручилось, а если не по суткам, а по времени, например через каждые 5 часов чтобы выскакивало? Извините, ещё такой момент на ПК ip меняю, окно выпадает. А на планшете меняю, окно не появляется! Один раз только появилось и всё.
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                02 июля 2016, 13:25
                                                                                                                                                                                                С помощью 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. сергей
                                                                                                                                                                                              19 июня 2016, 09:29
                                                                                                                                                                                              Спасибо, вопрос решил с помощью «jquery.cookie.min.js».
                                                                                                                                                                                            3. Aleksandr Ustinov
                                                                                                                                                                                              17 июня 2016, 07:19
                                                                                                                                                                                              Добрый день, у меня такой вот вопрос.
                                                                                                                                                                                              Есть форма с выбором (селект): itchief.ru/assets/uploadify/2/f/8/2f8517d0e06cd3a71a79abca0561ef39.png
                                                                                                                                                                                              По нажатию кнопки «оплатить», необходимо передать в модальное окно значение, в данный момент выбранное в форме. Подскажите, как это можно сделать.
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                17 июня 2016, 13:02
                                                                                                                                                                                                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
                                                                                                                                                                                                  18 июня 2016, 09:50
                                                                                                                                                                                                  Спасибо за моментальный ответ, как всегда выручаете. Всем рекомендую ваш сайт=)
                                                                                                                                                                                              2. Dmitry
                                                                                                                                                                                                12 июня 2016, 06:37
                                                                                                                                                                                                Здравствуйте, есть страница товара. На этой странице есть кнопка быстрого заказа. Кликая на эту кнопку всплывает модальное окно. Как сделать так, чтобы при клике поля товар, фото и цена подставлялись в заголовок?
                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                  12 июня 2016, 09:50
                                                                                                                                                                                                  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
                                                                                                                                                                                                    12 июня 2016, 18:56
                                                                                                                                                                                                    Спасибо.
                                                                                                                                                                                                  2. Александр Мальцев
                                                                                                                                                                                                    12 июня 2016, 07:15
                                                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                                                    1. При нажатии на кнопку, получить блок, к которому относится эта кнопка.
                                                                                                                                                                                                    2. Получить необходимые элементы.
                                                                                                                                                                                                    var h1 = $('h1').html()
                                                                                                                                                                                                    var img = $('.shop-item-container img')[0];
                                                                                                                                                                                                    var price = $('.shop-item-container .price');
                                                                                                                                                                                                    
                                                                                                                                                                                                    3. Вставить эти элементы в модальное окно.
                                                                                                                                                                                                    1. Dmitry
                                                                                                                                                                                                      12 июня 2016, 07:29
                                                                                                                                                                                                      А можно весь код показать в идеале) спасибо
                                                                                                                                                                                                  3. Maksim
                                                                                                                                                                                                    05 мая 2016, 14:05
                                                                                                                                                                                                    Александр, здравствуйте. Проблема с 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. Владислав
                                                                                                                                                                                                      26 апреля 2016, 12:50
                                                                                                                                                                                                      Здравствуйте, Александр. Использовал ваш пример для открытия модального окна. С помощью атрибутов data работает без проблем, но с помощью JavaScript не работает?
                                                                                                                                                                                                      1. Владислав
                                                                                                                                                                                                        26 апреля 2016, 13:15
                                                                                                                                                                                                        Разобрался. Всё работает. Надо было после jquery скрипт вставить. Спасибо.
                                                                                                                                                                                                      2. Maksim
                                                                                                                                                                                                        25 апреля 2016, 17:36
                                                                                                                                                                                                        Здравствуйте.
                                                                                                                                                                                                        Проблема следующая. У модального окна есть ограничение, связанное с рендерингом положения элементов при вызове экранной клавиатуры на устройствах 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. Александр Мальцев
                                                                                                                                                                                                          29 апреля 2016, 12:10
                                                                                                                                                                                                          Попробуйте добавить следующее:
                                                                                                                                                                                                          /* CSS */
                                                                                                                                                                                                          .modal-open {
                                                                                                                                                                                                            position: fixed;
                                                                                                                                                                                                            overflow: hidden;
                                                                                                                                                                                                          }
                                                                                                                                                                                                          
                                                                                                                                                                                                          1. Maksim
                                                                                                                                                                                                            29 апреля 2016, 12:41
                                                                                                                                                                                                            Я так пробовал уже. Работает некорректно. При фокусе на 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. Дмитрий
                                                                                                                                                                                                          24 апреля 2016, 21:52
                                                                                                                                                                                                          Доброго времени суток.
                                                                                                                                                                                                          Как бы половчее сделать три шага:
                                                                                                                                                                                                          1. Вывести модальное окно (с этим понятно).
                                                                                                                                                                                                          2. Заставить его повисеть 15 сек.
                                                                                                                                                                                                          3. Убрать окно не по кнопке, а по истечению этих 15 сек.
                                                                                                                                                                                                          delay() не работает в комбинации с $('#myModal').modal('show') и$('#myModal').modal('hide').
                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                            25 апреля 2016, 15:23
                                                                                                                                                                                                            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. Дмитрий
                                                                                                                                                                                                              08 мая 2016, 07:00
                                                                                                                                                                                                              Здравствуйте. Не получается добиться работоспособности скрипта. Модальное окно висит и не уходит. Повесил скрипт после jquery, вроде как и надо. Может быть фишка в том, что все скрипты грузятся в index.php. А модальное окно вызывается через контроллер (рукописный) и теряется связь скрипта и модального окна?
                                                                                                                                                                                                              Не подскажете, как правильно их взаимно спозиционировать (код модального окна, скрипт, контроллер)?
                                                                                                                                                                                                          2. Алёна
                                                                                                                                                                                                            13 апреля 2016, 15:31
                                                                                                                                                                                                            Большое спасибо за статью! Долго разбиралась с relatedTarget — вроде все просто, а примеров нигде толком нет…
                                                                                                                                                                                                            1. Кирилл
                                                                                                                                                                                                              23 марта 2016, 19:23
                                                                                                                                                                                                              Странно, такая кнопка не вызывает модальное окно,
                                                                                                                                                                                                              <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. Александр Мальцев
                                                                                                                                                                                                                06 апреля 2016, 13:49
                                                                                                                                                                                                                Действительно, странно. Ни разу не сталкивался с такой проблемой :)
                                                                                                                                                                                                              2. Владимир
                                                                                                                                                                                                                11 марта 2016, 01:10
                                                                                                                                                                                                                Всем добрый день!
                                                                                                                                                                                                                Кто-нибудь имел опыт размещения Яндекс карты с определенной точкой на карте в модальном окне?
                                                                                                                                                                                                                1. Сергей
                                                                                                                                                                                                                  09 марта 2016, 15:01
                                                                                                                                                                                                                  Здравствуйте, подскажите, пожалуйста, как реализовать модальное окно при нажатии на гиперссылку картинки.
                                                                                                                                                                                                                  Код:
                                                                                                                                                                                                                  <!--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. Александр Мальцев
                                                                                                                                                                                                                    11 марта 2016, 17:03
                                                                                                                                                                                                                    Как это можно сделать в 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). После этого изменяем содержимое заголовка и тела модального окна. Далее отображаем модальное окно.
                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                      10 марта 2016, 13:41
                                                                                                                                                                                                                      Здравствуйте.
                                                                                                                                                                                                                      Можно использовать следующий код:
                                                                                                                                                                                                                      $(function(){
                                                                                                                                                                                                                        $('.card-image a').click(function(){
                                                                                                                                                                                                                          //myModal - id модального окна
                                                                                                                                                                                                                          $('#myModal').modal('show');
                                                                                                                                                                                                                        });
                                                                                                                                                                                                                      });
                                                                                                                                                                                                                      
                                                                                                                                                                                                                    2. Эрик Галин
                                                                                                                                                                                                                      08 марта 2016, 18:38
                                                                                                                                                                                                                      Почему этот код не работает. Не получается запустить модальные окна.
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        09 марта 2016, 13:49
                                                                                                                                                                                                                        Эту заготовку необходимо запускать с веб-сервера, предварительно туда её загрузив. Или хотя бы с локального (Denwer, XAMPP или что-то другое). Иначе конечно у Вас ничего работать не будет. Т.е. как у Вас будут выполняться запросы, если нет сервера.
                                                                                                                                                                                                                      2. Эрик Галин
                                                                                                                                                                                                                        07 марта 2016, 01:38
                                                                                                                                                                                                                        Три вопроса:
                                                                                                                                                                                                                        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. Александр Мальцев
                                                                                                                                                                                                                          08 марта 2016, 10:01
                                                                                                                                                                                                                          На эти вопросы давно уже есть ответы. Достаточно поискать в комментариях.
                                                                                                                                                                                                                          Вот, например, ответ на то, как сделать, чтобы модальные окна были в разных файлах и загружались при нажатию на кнопку:
                                                                                                                                                                                                                          Ссылка на комментарий 1389.
                                                                                                                                                                                                                          1. Эрик Галин
                                                                                                                                                                                                                            07 марта 2016, 03:16
                                                                                                                                                                                                                            Прошу прощения. При закрытии видео у меня стоит такой код:
                                                                                                                                                                                                                            <script>
                                                                                                                                                                                                                            $('#myModal').on('hidden.bs.modal', function () {
                                                                                                                                                                                                                              $('iframe').attr('src', $('iframe').attr('src'));
                                                                                                                                                                                                                            })
                                                                                                                                                                                                                            </script>
                                                                                                                                                                                                                            Повторять бы его много раз не хотелось. Спасибо за внимание. Жду ответа с нетерпением.
                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                              08 марта 2016, 10:03
                                                                                                                                                                                                                              Это уже и есть решение Вашей проблемы, достаточно только изменить селектор:
                                                                                                                                                                                                                              <script>
                                                                                                                                                                                                                              $('.modal').on('hidden.bs.modal', function () {
                                                                                                                                                                                                                                $('iframe').attr('src', $('iframe').attr('src'));
                                                                                                                                                                                                                              })
                                                                                                                                                                                                                              </script>
                                                                                                                                                                                                                              
                                                                                                                                                                                                                          2. Максим
                                                                                                                                                                                                                            02 марта 2016, 22:18
                                                                                                                                                                                                                            Здравствуйте, а как реализовать такой вариант кликнуть по ссылке, открыть модальное окно и прокрутить до id или name в середине окна?
                                                                                                                                                                                                                            Пробовал что-то вроде такого:
                                                                                                                                                                                                                            $('#myModal').on('shown.bs.modal', function () {
                                                                                                                                                                                                                              $('#myInput').scrollTop(0);
                                                                                                                                                                                                                            })
                                                                                                                                                                                                                            Но прикрутить не получилось, открывает модальное окно и скроллит его до заголовка, может это фишка такая, по любому плавно прокрутить до заголовка.
                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                              06 марта 2016, 14:27
                                                                                                                                                                                                                              Здравствуйте, это можно выполнить так:
                                                                                                                                                                                                                              $('#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. Максим
                                                                                                                                                                                                                                07 марта 2016, 19:57
                                                                                                                                                                                                                                Александр, Спасибо!
                                                                                                                                                                                                                                А как можно составить и вычислить скролл по такой формуле:
                                                                                                                                                                                                                                $('#myInput').offset().top — (Высота всей страницы — высота окна)
                                                                                                                                                                                                                                Когда страница без скролла скрипт отрабатывает отлично, но как только появляется скролл на странице, в модальном окне идет смещение и myInput улетает вверх, предполагаю на разницу высоты…
                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                  08 марта 2016, 10:41
                                                                                                                                                                                                                                  Попробуй тогда вместо offset использовать position:
                                                                                                                                                                                                                                  $('#myModal').on('shown.bs.modal', function () {
                                                                                                                                                                                                                                    $(this).scrollTop($('#myInput').position().top);
                                                                                                                                                                                                                                  });
                                                                                                                                                                                                                                  
                                                                                                                                                                                                                            2. Александр
                                                                                                                                                                                                                              01 марта 2016, 11:02
                                                                                                                                                                                                                              Александр, день добрый.
                                                                                                                                                                                                                              Есть вот такая разметка.
                                                                                                                                                                                                                              Код разметки
                                                                                                                                                                                                                              <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-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(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. Александр Мальцев
                                                                                                                                                                                                                                01 марта 2016, 14:49
                                                                                                                                                                                                                                Здравствуйте, Александр.
                                                                                                                                                                                                                                Создавать такую разметку не стоит, т.к. Вы смешиваете HTML и CSS и JavaScript. Потом впоследствии просто не разберётесь…
                                                                                                                                                                                                                                Даже если написать функцию Ваш код не будет работать должен образом.
                                                                                                                                                                                                                                Функция будет выглядеть следующим образом:
                                                                                                                                                                                                                                function ModalOpen(idModal) {
                                                                                                                                                                                                                                  $('#'+idModal).modal('show');
                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                
                                                                                                                                                                                                                                Это связано с тем, что у событий JavaScript есть всплытие, и, например, при нажатии на закрытие модального окна, Вы опять тем самым вызовите модальное окно. Это происходит из-за того что после нажатия кнопки закрыть, событие клик начинает всплывать и доходит до td и опять вызывает модальное окно. Вот так… А запретить всплытие, как Вы написали, невозможно.
                                                                                                                                                                                                                                Единственный выход перенести все модальные окна сразу после открывающего тега body. Это не только правильно, но и Ваш код будет работать.
                                                                                                                                                                                                                                1. Александр
                                                                                                                                                                                                                                  01 марта 2016, 16:07
                                                                                                                                                                                                                                  Благодарю.
                                                                                                                                                                                                                                  Да вижу, что работает не совсем корректно.
                                                                                                                                                                                                                                  Вынести все модальные окна под открывающий тег bоdy — не реально, т.к. контент генерируется динамически vbs-ом. Вынос модальных окон в начало документа — усложнит код минимум вдвое.

                                                                                                                                                                                                                                  По данному примеру, как, оказалось, достаточно вынести CSS и DIV с модальным окном выше открывающего td и все нормально заработало.
                                                                                                                                                                                                                              2. larisa
                                                                                                                                                                                                                                22 февраля 2016, 15:10
                                                                                                                                                                                                                                Здравствуйте! Подскажите, пожалуйста, как сделать, чтобы модальное окно закрывалось при нажатии на
                                                                                                                                                                                                                                <button type="submit" class="btn">Выслать новый пароль</button>
                                                                                                                                                                                                                                и «submit» при этом срабатывал?
                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                  29 февраля 2016, 14:54
                                                                                                                                                                                                                                  Здравствуйте.
                                                                                                                                                                                                                                  Напишите скрипт:
                                                                                                                                                                                                                                  $(function(){
                                                                                                                                                                                                                                    //#myBtn - id кнопки
                                                                                                                                                                                                                                    $('#myBtn').click(function(){
                                                                                                                                                                                                                                      //#myForm - id формы
                                                                                                                                                                                                                                      $('#myForm').submit();
                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                                  });
                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                  Кнопка:
                                                                                                                                                                                                                                  <button id="myBtn" type="submit" class="btn">Выслать новый пароль</button>
                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                  Форма:
                                                                                                                                                                                                                                  <form id="myForm">
                                                                                                                                                                                                                                    ...
                                                                                                                                                                                                                                  </form>
                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                2. Дмитрий
                                                                                                                                                                                                                                  19 февраля 2016, 16:44
                                                                                                                                                                                                                                  Здравствуйте. Как вынести бутстрап modal за пределы родителей (через js).
                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                    21 февраля 2016, 03:03
                                                                                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                                                                                    Этот момент описывается в разделе «Особенности компонента Modal». Там говорится, что HTML-код модального окна желательно размещать сразу после открывающего тега body.
                                                                                                                                                                                                                                    1. Дмитрий
                                                                                                                                                                                                                                      21 февраля 2016, 08:33
                                                                                                                                                                                                                                      Здравствуйте, я это понимаю, но в системе, на которой находится сайт, форма быстрого заказа, так устроена, что она находится везде внутри блока товара и стандартно не вынести за пределы. Меня интересует, возможно ли поместить посредствам js модальное окно после открывающего тега body.
                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                        22 февраля 2016, 05:36
                                                                                                                                                                                                                                        После загрузки необходимо написать скрипт, который переместит все модальные окна сразу же после открывающего тега body.
                                                                                                                                                                                                                                        <script>
                                                                                                                                                                                                                                        $(function(){
                                                                                                                                                                                                                                          $('div.fade').each(function(){
                                                                                                                                                                                                                                            $(this).prependTo("body");
                                                                                                                                                                                                                                          });
                                                                                                                                                                                                                                        });
                                                                                                                                                                                                                                        </script>
                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                        1. Тарас
                                                                                                                                                                                                                                          10 октября 2016, 16:26
                                                                                                                                                                                                                                          Низкий поклон! Проблема решилась.
                                                                                                                                                                                                                                          1. Дмитрий
                                                                                                                                                                                                                                            22 февраля 2016, 08:11
                                                                                                                                                                                                                                            Александр, спасибо огромнейшее, помогло!
                                                                                                                                                                                                                                    2. Александр
                                                                                                                                                                                                                                      17 февраля 2016, 07:28
                                                                                                                                                                                                                                      И еще.
                                                                                                                                                                                                                                      После открытия и закрытия модального окна вокруг кнопки/ссылки появляется синяя рамочка
                                                                                                                                                                                                                                      Можно ее как-то убрать?
                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                        17 февраля 2016, 11:54
                                                                                                                                                                                                                                        Синяя рамочка означает то, что кнопка находится в фокусе.
                                                                                                                                                                                                                                        Что её убрать, необходимо найти данную кнопку и при получении ей фокуса, его убрать.
                                                                                                                                                                                                                                        Код JavaScript:
                                                                                                                                                                                                                                        $(function() {
                                                                                                                                                                                                                                          // кнопка с атрибутом data-target="myModal"
                                                                                                                                                                                                                                          $('[data-target="#myModal"]').focus(function () {
                                                                                                                                                                                                                                            $(this).blur();
                                                                                                                                                                                                                                          });
                                                                                                                                                                                                                                        });
                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                        1. Александр
                                                                                                                                                                                                                                          17 февраля 2016, 12:29
                                                                                                                                                                                                                                          Отлично, Благодарю.
                                                                                                                                                                                                                                      2. Александр
                                                                                                                                                                                                                                        16 февраля 2016, 15:07
                                                                                                                                                                                                                                        И еще вопрос по изменению размеров модальных окон.
                                                                                                                                                                                                                                        Есть ли какая-то возможность явно указать требуемую ширину модального окна, например 80% ширины рабочей области окна браузера?
                                                                                                                                                                                                                                        Допустим, на странице есть 15-20 модальных окон, каждое из которых открывается при щелчке по соответствующему пункту (обращение идет по id окна).
                                                                                                                                                                                                                                        Соответственно, если я правильно понял из примера, ширина окна, выставляется именно этим самым id.
                                                                                                                                                                                                                                        <div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
                                                                                                                                                                                                                                        Следовательно, возникает вопрос. Как показывать именно нужное широкое окно?
                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                          16 февраля 2016, 17:37
                                                                                                                                                                                                                                          Вы немного не правильно поняли. Ширина модального окна устанавливается с помощью классов modal-sm или modal-lg, один из которых необходимо добавить к классу modal-dialog.
                                                                                                                                                                                                                                          Если Вам необходимо установить свою ширину некоторому окну, то в CSS это будет выглядеть следующим образом:
                                                                                                                                                                                                                                          /* largeModal - id окна, которому необходимо установить щирину */
                                                                                                                                                                                                                                          #largeModal .modal-dialog {
                                                                                                                                                                                                                                            width: 80%;
                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                          1. Александр
                                                                                                                                                                                                                                            17 февраля 2016, 07:26
                                                                                                                                                                                                                                            Понял, спасибо.
                                                                                                                                                                                                                                        2. Александр
                                                                                                                                                                                                                                          15 февраля 2016, 13:09
                                                                                                                                                                                                                                          Еще вопрос.
                                                                                                                                                                                                                                          Есть вероятность, что он немного не в этот раздел, а в формы. Но, возник в связи с отображением 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. Александр Мальцев
                                                                                                                                                                                                                                            16 февраля 2016, 17:27
                                                                                                                                                                                                                                            Это стандартное и правильное поведение браузера. Он не может в раскрывающем списке обрезать Вам опцию. Он должен предоставить пользователю полное её содержимое. Раньше в старых браузерах был такой глюк, т.е. ширина выпадающего списка равнялась ширине элемента select. Но потом это убрали.
                                                                                                                                                                                                                                            А с чем Вы хотите бороться?
                                                                                                                                                                                                                                            Наилучший вариант — это сделать пункт таким же коротким, как и другие. Можно конечно поступить жестоко и его обрезать. Но тогда как пользователь узнает что он выбрал.
                                                                                                                                                                                                                                            Другой хороший вариант, если Вам всё-таки нужны длинные тексты — это использовать, например, компонент dropdown. Он позволяет создавать многострочные выпадающие списки. Т.е. когда один пункт, если он не влезет, переносится на другую строчку.
                                                                                                                                                                                                                                            1. Александр
                                                                                                                                                                                                                                              04 марта 2016, 11:20
                                                                                                                                                                                                                                              Dropdown, конечно хорош, но не совсем удобен и корректен в качестве замены select -а, т.к. усложнит обработку поля формы.

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

                                                                                                                                                                                                                                                    То же самое вы могли бы сделать и с dropdown, т.е. скрыть элемент select. А вместо него «подсунуть» dropdown. После этого связать логику работы dropdown с компонентом select.
                                                                                                                                                                                                                                                    1. Александр
                                                                                                                                                                                                                                                      06 марта 2016, 16:16
                                                                                                                                                                                                                                                      Да, я в курсе, что он подменяет select.
                                                                                                                                                                                                                                                      Суть в том, что если убрать центровку таблицы, — то скакать перестает. Не критично в принципе.
                                                                                                                                                                                                                                          2. Александр
                                                                                                                                                                                                                                            11 февраля 2016, 18:16
                                                                                                                                                                                                                                            Здравствуйте.
                                                                                                                                                                                                                                            А как сделать, чтобы модальное окно выезжало до центра рабочей области окна браузера, а не останавливалось в верхней части.
                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                              12 февраля 2016, 12:25
                                                                                                                                                                                                                                              Здравствуйте.
                                                                                                                                                                                                                                              В 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. Александр
                                                                                                                                                                                                                                                13 февраля 2016, 06:42
                                                                                                                                                                                                                                                Благодарю, JavaScript — идеальный вариант. Вот только из значения margin-top надо еще вычесть половину высоты самого модального окна, а то по центру рабочей области его верхняя граница. Подскажете, как это будет выглядеть?
                                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                                  14 февраля 2016, 14:28
                                                                                                                                                                                                                                                  А, но и так вычитается: $('.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. Александр
                                                                                                                                                                                                                                                    14 февраля 2016, 15:28
                                                                                                                                                                                                                                                    Отлично.
                                                                                                                                                                                                                                                    Вот этот вариант точно по центру открывает.
                                                                                                                                                                                                                                                    Благодарю.
                                                                                                                                                                                                                                            2. Сергей
                                                                                                                                                                                                                                              10 февраля 2016, 12:44
                                                                                                                                                                                                                                              Здравствуйте. Проблема в следующем: есть полностью рабочее модальное окно в котором присутствует ссылка на id блока контакты. Контакты расположены внизу страницы под своим id. При нажатии страница прокручивается на контакты, а модаль не закрывается. data-dismiss=«modal» просто закрыло модаль без перехода на контакты.
                                                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                                                12 февраля 2016, 12:38
                                                                                                                                                                                                                                                Здравствуйте, Сергей.
                                                                                                                                                                                                                                                Вам необходимо сделать следующее:
                                                                                                                                                                                                                                                1. Добавить к ссылке какой-нибудь идентификатор (например, link)
                                                                                                                                                                                                                                                2. Написать скрипт:
                                                                                                                                                                                                                                                Код JavaScript
                                                                                                                                                                                                                                                <script>
                                                                                                                                                                                                                                                $(function() {
                                                                                                                                                                                                                                                  // при нажатию на ссылку
                                                                                                                                                                                                                                                  $('#link').click(function(){
                                                                                                                                                                                                                                                    //закрыть модальное окно (myModal - id формы)
                                                                                                                                                                                                                                                    $('#myModal').modal('hide');
                                                                                                                                                                                                                                                  });
                                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                                </script>
                                                                                                                                                                                                                                                1. Сергей
                                                                                                                                                                                                                                                  12 февраля 2016, 12:45
                                                                                                                                                                                                                                                  На счет идентификатора по подробнее. Где и каким образом его ставить?
                                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                                    12 февраля 2016, 13:02
                                                                                                                                                                                                                                                    Идентификатор — это id.
                                                                                                                                                                                                                                                    <a id="link" href="#">Название ссылки</a>
                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                    1. Сергей
                                                                                                                                                                                                                                                      12 февраля 2016, 13:15