{"draftJsState":{"blocks":[{"data":{"image":{"id":"5ebf1217f1689869c21ceefd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"do4th"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В основном, модальное окно — это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени сеанса или получение их окончательного подтверждения перед выполнением каких-либо критических действий, таких как сохранение или удаление важных данных. Мне довольно часто приходится использовать модальные окна для вывода различных форм, таких как например формы обратной связи.","type":"unstyled","key":"211ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Базовый код модального окна","type":"header-two","key":"f56d0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете легко создавать очень умные и гибкие диалоговые окна с помощью модального плагина Bootstrap. В следующем примере представлена базовая структура для создания простого модального окна с заголовком, телом сообщения и нижним колонтитулом, содержащим кнопки действий для пользователя.","type":"unstyled","key":"408ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":3,"offset":48,"style":"BOLD"},{"length":3,"offset":75,"style":"BOLD"},{"length":3,"offset":103,"style":"BOLD"},{"length":2,"offset":130,"style":"BOLD"},{"length":2,"offset":168,"style":"BOLD"},{"length":6,"offset":173,"style":"BOLD"},{"length":6,"offset":232,"style":"BOLD"},{"length":3,"offset":243,"style":"BOLD"},{"length":3,"offset":249,"style":"BOLD"},{"length":1,"offset":274,"style":"BOLD"},{"length":1,"offset":341,"style":"BOLD"},{"length":1,"offset":345,"style":"BOLD"},{"length":5,"offset":371,"style":"BOLD"},{"length":5,"offset":431,"style":"BOLD"},{"length":1,"offset":439,"style":"BOLD"},{"length":3,"offset":444,"style":"BOLD"},{"length":3,"offset":450,"style":"BOLD"},{"length":6,"offset":477,"style":"BOLD"},{"length":6,"offset":554,"style":"BOLD"},{"length":6,"offset":563,"style":"BOLD"},{"length":6,"offset":629,"style":"BOLD"},{"length":3,"offset":639,"style":"BOLD"},{"length":3,"offset":646,"style":"BOLD"},{"length":3,"offset":653,"style":"BOLD"},{"length":3,"offset":659,"style":"BOLD"}],"text":"","type":"unstyled","key":"akmre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того, чтобы код сработал, конечно же, вы должны подключить bootstrap.min.css в внутри тегов , например так:","type":"unstyled","key":"cc3ei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"391ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И перед закрывающим тегом подключить библиотеку jQuery, bootstrap.min.js, popper.min.js и скрипт, инициализирующий запуск модального окна:","type":"unstyled","key":"4ipkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":1,"style":"BOLD"},{"length":6,"offset":65,"style":"BOLD"},{"length":6,"offset":73,"style":"BOLD"},{"length":6,"offset":162,"style":"BOLD"},{"length":6,"offset":170,"style":"BOLD"},{"length":6,"offset":256,"style":"BOLD"},{"length":6,"offset":264,"style":"BOLD"},{"length":6,"offset":349,"style":"BOLD"}],"text":"","type":"unstyled","key":"5m67m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функция modal() запускает модальное окно с указанным ID, в данном случае myModal.","type":"unstyled","key":"dnogl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы запустите приведенный выше пример, он автоматически создаст модальное окно, когда DOM будет полностью загружен через JavaScript. Результат будет выглядеть примерно так:","type":"unstyled","key":"cnqsk"},{"data":{"image":{"id":"5ebf1217f2ad6f2298323b53"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модальное окно Bootstrap","type":"atomic:image","key":"ebd9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Совет: всегда старайтесь размещать HTML-код модального окна в позиции верхнего уровня в вашем документе, предпочтительно сразу после открывающего тега , чтобы избежать помех от других элементов, в противном случае это может повлиять на внешний вид или функциональность модального окна.","type":"unstyled","key":"bf80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Активируйте модальные окна с помощью data-* атрибутов","type":"header-two","key":"7ahod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете активировать модальное окно Bootstrap, нажав на кнопку или ссылку через data-* атрибуты без написания кода JavaScript. ","type":"unstyled","key":"dirpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Объяснение кода","type":"header-two","key":"8o3m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для активации модального окна Bootstrap через data-* атрибуты нам в основном нужны два компонента — элемент контроллера, такой как кнопка или ссылка, и сам модальный элемент.","type":"unstyled","key":"bstv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешний контейнер каждого модального элемента в документе должен иметь уникальный идентификатор (в данном случае id=\"myModal\"), чтобы на него можно было ориентироваться через data-target (для кнопок) или href (для гиперссылок) атрибут элемента контроллера.","type":"unstyled","key":"390l2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут data-toggle=»modal» требуется добавить в элемент контроллера, например кнопку или привязку, вместе с атрибутом data-target=\"#myModal\" или href=\"#myModal\", чтобы обозначить элемент как контроллер всплывающих окон.","type":"unstyled","key":"faj5c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Класс .modal-dialog устанавливает ширину, а также горизонтальное и вертикальное выравнивание модального окна. В то время как класс .modal-content устанавливает стили, такие как цвет текста и фона, границы, закругленные углы и т. д.","type":"unstyled","key":"12kse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все остальное, я думаю, не требует пояснений, например, элемент .modal-header определяет заголовок для модального окна, который обычно содержит заголовок и кнопку закрытия, тогда как элемент .modal-body содержит фактический контент, такой как текст, изображения, формы и т.д., а элемент .modal-footer определяет нижний колонтитул, который обычно содержит кнопки действий для пользователя.","type":"unstyled","key":"4l8ud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Класс .fade в элементе .modal добавляет эффект анимации исчезновения и скольжения при отображении и скрытии модального окна. Если вы хотите, чтобы окно просто появлялось без какого-либо эффекта, вы можете просто удалить этот класс. Кроме того, когда модальные окна становятся слишком большими для просмотра, они прокручиваются независимо от самой страницы.","type":"unstyled","key":"945h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Активируйте модальные окна через JavaScript","type":"header-two","key":"8kb2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете активировать модальное окно Bootstrap через JavaScript — просто вызовите метод modal() с идентификатором окна или его селектором класса в вашем коде JavaScript.","type":"unstyled","key":"453la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":10,"style":"BOLD"},{"length":8,"offset":26,"style":"BOLD"},{"length":8,"offset":57,"style":"BOLD"}],"text":"","type":"unstyled","key":"9rfks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Изменяйте размеры модальных окон","type":"header-two","key":"685vn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Bootstrap дает вам возможность масштабировать модальные окна. Вы можете создавать малые, большие и очень большие окна, добавив дополнительный класс .modal-sm, .modal-lg или .modal-xl соответственно в элемент с классом.modal-dialog.","type":"unstyled","key":"2vva5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Совет: максимальная ширина модального окна по умолчанию будет 500px, тогда как максимальная ширина малого, большого и очень большого будет 300px, 800px и 1140px, соответственно.","type":"unstyled","key":"8utd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"BOLD"}],"text":"Изменяйте содержимое модального окна на основе триггерной кнопки","type":"header-two","key":"de81i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часто несколько модальных окон на веб-страницах имеют почти одинаковый контент с небольшими отличиями. Вы можете использовать модальные события для создания разных модальных окон на основе одного и того же модального HTML. В следующем примере показано, как изменить заголовок модального окна в соответствии со значением атрибута data-title кнопки триггера.","type":"unstyled","key":"d15d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Центрируйте окна вертикально","type":"header-two","key":"7q41c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто добавьте класс .modal-dialog-centered к элементу с классом .modal-dialog, чтобы вертикально отцентрировать окно. Если у модального окна длинный контент, вы можете дополнительно применить класс .modal-dialog-scrollable к .modal-dialog, чтобы сделать контентную часть прокручиваемой. ","type":"unstyled","key":"7950p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Используйте сетку Bootstrap внутри модальных окон","type":"header-two","key":"fufuc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс .row для создания строк и классы .col- *, .col-sm- *, .col-md- *, .col-lg- * и .col-xl- * для создания столбцов внутри элемента с классом .modal. ","type":"unstyled","key":"c3naj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Загружайте контент в модальные окна через Ajax","type":"header-two","key":"6uk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете загрузить удаленный контент в модальном окне Bootstrap через Ajax.","type":"unstyled","key":"3kijn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете размещать всплывающие подсказки внутри модальных окон при необходимости. Когда модальные окна закрыты, любые всплывающие подсказки автоматически отключаются.","type":"unstyled","key":"edrh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Параметры","type":"header-two","key":"1dgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существуют определенные параметры, которые можно передать методу modal() для настройки функциональности модального режима. Опции могут быть переданы через data-* атрибуты или JavaScript.","type":"unstyled","key":"b3aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для настройки модальных опций с помощью data-* атрибутов просто добавьте имя опции к data-, например data-background=\"static\", data-keyboard=\"false\" и т. д.","type":"unstyled","key":"2lc3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Методы","type":"header-two","key":"1ulo0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это стандартные методы загрузки модальных окон:","type":"unstyled","key":"7oeoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":".modal(options)","type":"header-two","key":"5m80u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод активирует контент как модальный. Это также позволяет вам устанавливать параметры для модальных окон.","type":"unstyled","key":"elr2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":".modal(‘show’)","type":"header-two","key":"bn0me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод может быть использован для открытия модального окна вручную.","type":"unstyled","key":"b1ucm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":".modal(‘hide’)","type":"header-two","key":"7s2o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод можно использовать, чтобы скрыть модальное окно вручную.","type":"unstyled","key":"7j1ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":".modal(‘toggle’)","type":"header-two","key":"5si97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод можно использовать для переключения отображения модального окна вручную.","type":"unstyled","key":"2fber"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":".modal(‘handleUpdate’)","type":"header-two","key":"6k9v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод перенастраивает положение модального слоя, чтобы противостоять рывку, возникающему из-за появления полосы прокрутки в области просмотра, в случае, если высота модального окна изменяется таким образом, что она становится выше, чем высота области просмотра, когда она открыта.","type":"unstyled","key":"670o2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типичным примером этого сценария является показ скрытых элементов внутри модального окна с помощью JavaScript или загрузка содержимого внутри модального окна с помощью Ajax после активации.","type":"unstyled","key":"f0kpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"События","type":"header-two","key":"en6r3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Класс Bootstrap .modal включает несколько событий для подключения к модальной функциональности.","type":"unstyled","key":"fkh6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"СобытиеОписаниеshow.bs.modalСобытие происходит, когда вызывается метод show(), предназначенный для открытия модального окна.shown.bs.modalСобытие происходит, когда модальное окно становится видимым для пользователя, т.е. когда оно будет полностью отрисовано с помощью стилей CSS.hide.bs.modalСобытие происходит, когда вызывается метод hide(), который предназначен для скрытия модального окна.hidden.bs.modalСобытие происходит, когда модальное окно становится полностью невидимым для пользователя, т.е. когда будут отработаны полностью все CSS-свойства, выполняющие этот процесс.","type":"unstyled","key":"fr651"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В следующем примере отображается сообщение с предупреждением, когда модальное окно станет полностью невидимым для пользователя.","type":"unstyled","key":"at80t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":10,"style":"BOLD"},{"length":8,"offset":26,"style":"BOLD"},{"length":8,"offset":77,"style":"BOLD"}],"text":"","type":"unstyled","key":"3v7lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-two","key":"5r6vl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите модальные окна в Boostrap имеют гибкую функциональность и множество настроек, а использовать их совсем не сложно. Надеюсь эта статья поможет вам разобраться в применении всплывающих окон Bootstrap на своем сайте, и использовать их функциональность в полной мере. Удачи!","type":"unstyled","key":"1hcnm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"6ZnCRExfbswV1ZeBsHKL"}],"entityMap":{}},"mentions":[]}

Подтверждение