Модальное окно Bootstrap для сайта

В этой статье разберём js-компонент фреймворка Bootstrap под названием Modal, который предназначен для создания на сайте модальных окон. Научимся его настраивать и использовать для решения различных задач.
О компоненте Bootstrap Modal
Modal – это компонент фреймворка Bootstrap, написанный с использованием JavaScript и предназначенный для добавления на сайт диалоговых окон и отображения в них различного контента.
При открытии модального окна над содержимым страницы помещается «фон», который затемняет её и блокирует с ней любые взаимодействия.

Всплывающее окно можно применить на сайте для разных целей. Например, для отображения регистрационной формы, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте или чего-то другого.
Основные сведения о компоненте Modal:
- код состоит из HTML, CSS и JavaScript;
- располагается над остальным содержимым, при открытии убирает прокрутку у
<body>
посредством добавления к немуoverflow:hidden
(это необходимо для обеспечения прокрутки контента модального окна, а не страницы); - клик на модальном «фоне» закрывает окно;
- нельзя открыть одновременно несколько окон, вложенность не поддерживается;
- HTML-код модального окна желательно поместить непосредственно в
<body>
без вложения его в другие элементы (особенно сposition:fixed
); - некоторые iOS и Android устройства имеют весьма ограниченную поддержку
overflow:hidden
на<body>
, из-за этого имеется баг: при прокручивании контента модального окна прокручивается также содержимое<body>
; - в Bootstrap 5 в отличие от предыдущих версий компонент написан на чистом JavaScript без использования jQuery.
Для установки фокуса на элемент в модальном окне используйте метод focus()
:
$('#myModal').on('shown.bs.modal', function() {
// #myInput - id элемента, которому необходимо установить фокус
$('#myInput').focus();
})
Структура модального окна
Вёрстка модального окна выполняется с использованием следующих классов:
modal
,modal-dialog
иmodal-content
– обёртки;modal-header
– заголовок;.modal-body
– тело;modal-footer
– футер (не обязательно).

Базовый HTML-код модального окна на Bootstrap 5:
<!-- Bootstrap 5 -->
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
</div>
Базовый HTML-код модального окна на Bootstrap 4 (отличается от предыдущего только кнопкой закрытия):
<!-- Bootstrap 4 -->
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
</div>
В HTML работа с модальным окном сводится к копированию базового кода, добавлению ему id
, изменению заголовка, наполнению тела нужным контентом и при необходимости к добавлению в футер определённых кнопок.
Открытие модального окна при нажатии на кнопку
Открытие модального окна обычно осуществляется при наступлении какого-то события, например, при нажатии на кнопку. При этом это можно сделать как с помощью JavaScript, так и без написания кода (с помощью data-атрибутов).
С помощью data-атрибутов
Например, создадим кнопку для которой с помощью data-атрибутов укажем действие, которое она будет выполнять.
<!-- Bootstrap 5 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">Открыть</button>
<div class="modal fade" id="modal" tabindex="-1"> ... </div>
Атрибуты Bootstrap 5 для управления Modal:
data-bs-toggle="modal"
– говорит о том, что необходимо вызвать модальное окно;data-bs-target="#modal"
– указывает на цель с помощью селектора (в данном случае на модальное окно сid="modal"
).
В третьей и четвёртой версии этого фреймворка для этого тоже используются два атрибута, но с немного другими именами:
<!-- Bootstrap 4 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">Открыть</button>
<div class="modal fade" id="modal" tabindex="-1"> ... </div>
С помощью JavaScript
Пример кода на чистом JavaScript для открытия модального окна на Bootstrap 5:
<!-- Bootstrap 5 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// получим кнопку id="btn" с помощью которой будем открывать модальное окно
const btn = document.querySelector('#btn');
// активируем контент id="modal" как модальное окно
const modal = new bootstrap.Modal(document.querySelector('#modal'));
// при нажатии на кнопку
btn.addEventListener('click', function() {
// открываем модальное окно
modal.show();
});
});
<script>
<!-- Кнопка -->
<button type="button" class="btn btn-primary" id="btn">Открыть</button>
<!-- Модальное окно -->
<div id="modal" class="modal fade"> ... </div>
В третьей и четвёртой версии данного фреймворка открытие модального окна выполняется посредством вызова modal("show")
:
<!-- Bootstrap 3 и 4 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// при клике на #btn
$('#btn').click(function() {
// $('#modal') – модальное окно, которое нужно открыть
$('#modal').modal('show');
});
});
<script>
<!-- Кнопка -->
<button type="button" class="btn btn-primary" id="btn">Открыть</button>
<!-- Модальное окно -->
<div id="modal" class="modal fade"> ... </div>
Настройка модального окна
С помощью классов
1. Прокрутка тела
По умолчанию модальное окно прокручивается, когда выходит за пределы области просмотра. Но если вы хотите чтобы прокручивалось не само модальное окно, а его тело то добавьте к .modal-dialog
класс modal-dialog-scrollable
:
<!-- v4, v5 -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
2. Отображение в центре экрана
По умолчанию модальное окно отображается в верхней части экрана, если нужно по центру то добавьте к .modal-dialog
класс modal-dialog-centered
:
<!-- v4, v5 -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
3. Отключение анимации
За анимацию отвечает класс fade
, если она не нужна, то просто удалите его:
<!-- v3 - v5 -->
<div class="modal" tabindex="-1">
...
</div>
4. Изменение ширины модального окна
По умолчанию максимальная ширина модального окна 500px
. При необходимости это значение можно переопределить посредством добавления к .modal-dialog
одного из следующих классов:
modal-sm
(<= 300px);modal-lg
(<= 800px);modal-xl
(<= 1140px).
Например, увеличим максимальную ширину модального окна до 1140px:
<!-- v3 - v5 (modal-xl - нет в v3) -->
<div class="modal-dialog modal-xl">
...
</div>
5. На весь экран (только в Bootstrap 5)
Для того чтобы всплывающее модальное окно занимала всю область просмотра добавьте один из следующих классов к .modal-dialog
:
modal-fullscreen
– для всех экранов;modal-fullscreen-sm-down
– только когда viewport меньше 576px;modal-fullscreen-md-down
– меньше 768px;modal-fullscreen-lg-down
– меньше 992px;modal-fullscreen-xl-down
– меньше 1200px;modal-fullscreen-xxl-down
– меньше 1400px.
<!-- v5 -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
С помощью data-атрибутов
В Bootstrap имеются следующие настройки:
backdrop
– при открытии modal по умолчанию (true
) происходит помещение «фона» над контентом страницы, при нажатии на него происходит закрытие модального окна;false
– без фона;'static'
– со статическими «фоном», modal не закрывается при нажатии за его пределами;keyboard
– позволяет закрыть modal при нажатии клавиши Esc (по умолчанию –true
);focus
– при инициализации устанавливает фокус на модальное окно (по умолчанию –true
);show
(в пятой версии нет) – открывает окно сразу после его активирования (по умолчанию –true
);
Установить эти параметры можно как с помощью JavaScript, так и посредством data-атрибутов.
В Bootstrap 5 атрибут пишется с префиксом data-bs-*
, в третьей и четвёртой версии – с data-*
.
Например, параметр backdrop
в пятой версии пишется так: data-bs-backdrop="static"
. А в третьей и предыдущей версии так: data-backdrop="static"
.
Пример. По умолчанию всплывающее окно закрывается, когда мы кликаем на модальный «фон» или нажимаем клавишу Esc. Чтобы эти действия запретить, к .modal
можно добавить следующих два data-атрибута:
<!-- v5 -->
<div class="modal fade" id="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
...
</div>
<!-- v3 – v4 -->
<div class="modal fade" id="modal" data-backdrop="static" data-keyboard="false" tabindex="-1">
...
</div>
Добавление доступности (aria-атрибутов)
Добавление всплывающему окну доступности, предназначенной для вспомогательных технологий (экранных дикторов и других пользовательских агентов), осуществляется с помощью атрибутов ARIA.
Обязательно добавьте aria-labelledby="..."
, в котором укажите идентификатор модального заголовка.
Кроме этого, вы можете добавить описание к modal посредством атрибута aria-describedby
, который необходимо добавить к .modal
.
Обратите внимание, что в четвёртой и пятой версии не нужно добавлять атрибут role="dialog"
к .modal-dialog
. Он добавляется в этих версиях с помощью JavaScript.
Т.к. по умолчанию modal не открыто, то чтобы это сообщить с помощью стандарта WAI-ARIA добавьте aria-hidden="true"
к элементу .modal
.
Описание ролей и свойств ARIA:
role="dialog"
– элемент, выступающий в роли диалога (окно, которое предназначено для прерывания текущей работы приложения с целью запроса у пользователя некоторой информацию или требующей от него ответа).aria-labelledby="..."
– предназначен для идентификации элемента (или элементов), который содержат краткое название текущего элемента.aria-describedby="..."
– предназначен для идентификации элемента (или элементов), который содержит подробное описание текущего объекта.aria-hidden="true"
– указывает, что элемент и все его потомки не видимы пользователю.aria-label="..."
– содержит описание текущего элемента.
<!-- v5 -->
<div class="modal fade" id="modal-window" tabindex="-1" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-label">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
</div>
Методы Modal в Bootstrap 4
В третьей и четвёртой версии фреймворка активировать контент как модальное перед тем как вызывать его методы не необязательно. В основном это может понадобиться, когда его нужно настроить с помощью параметров:
// #modal - элемент, содержащий контент, который нужно активировать как модальное окно с указанными настройками
var modal = $('#modal').modal({ keyboard: false, show: false, backdrop: 'static' });
Все параметры описаны в разделе, где мы рассматривали настройку modal с помощью data-атрибутов.
При этом желательно сохранить полученный элемент в переменную (как показано в примере выше), чтобы для выполнения следующих операций над modal его заново не получать:
modal.modal('show'); // открыть
modal.modal('hide'); // скрыть
modal.modal('toggle'); // переключить
Если в переменную не сохранить элемент, то нам придётся его каждый раз получать:
$('#modal').modal('show'); // открыть
$('#modal').modal('hide'); // скрыть
$('#modal').modal('toggle'); // переключить
Пример скрипта, который при нажатии на кнопку #btn
будет открывать модальное окно #modal-content
с настройками по умолчанию:
$('#btn').click(function() {
$('#modal-content').modal('show');
});
Пример скрипта, в котором сначала инициализируем модальное окно #modal-content
с нужными настройками, а затем при нажатию на кнопку #btn
будет его открывать:
// инициализируем контент #modal-content как Modal
$('#modal-content').modal({ keyboard: false, show: false, backdrop: 'static' });
// при нажатию на кнопку будем его открывать
$('#btn').click(function() {
$('#modal-content').modal('show');
});
Этот код можно улучшить если сохранить выбранный элемент в переменную:
// инициализируем контент #modal-content как Modal
var modalContent = $('#modal-content').modal({ keyboard: false, show: false, backdrop: 'static' });
// при нажатию на кнопку будем его открывать
$('#btn').click(function() {
modalContent.modal('show');
});
Пример скрипта, который будет открывать всплывающее окно #subscribe
каждые 5 секунд после загрузки страницы:
// после загрузки страницы
window.addEventListener('load', function () {
// устанавливаем интервал, который будет вызывать функцию каждые 5 секунд
window.setInterval(function () {
// если модальное окно открыто, то завершаем работу
if ($('body').hasClass('modal-open')) {
return;
}
// открываем модальное окно
$('#subscribe').modal('show');
}, 5000);
});
Методы Modal в Bootstrap 5
В Bootstrap 5 перед тем, как вызывать методы modal его необходимо сначала активировать:
// элемент, содержащий контент модального окна (например, имеющий id="modal")
const elemModal = document.querySelector('#modal');
// активируем элемент в качестве модального окна с параметрами по умолчанию
const modal = new bootstrap.Modal( elemModal);
Настройка Modal осуществляется путем передачи во второй аргумент необходимых параметров в формате объекта:
const modal = new bootstrap.Modal(elemModal, {
backdrop: true,
keyboard: true,
focus: true
});
Методы:
modal.show()
– открыть модальное окно;modal.hide()
– закрыть;modal.toggle()
– переключить;modal.handleUpdate()
– обновить положение открытого окна;modal.dispose()
– уничтожить модальное окно.
Пример скрипта, который будет открывать модальное окно #subscribe
сразу после полной загрузки документа:
// после загрузки страницы
window.addEventListener('load', function () {
// элемент, содержащий контент модального окна (например, имеющий id="modal")
const elemModal = document.querySelector('#subscribe');
// активируем элемент в качестве модального окна с параметрами по умолчанию
const modal = new bootstrap.Modal(elemModal);
// откроем модальное окно
modal.show();
});
Пример, в котором будем показывать то или иное содержимое в модальном окне (в зависимости от значения атрибута data-list
):
<script>
// после загрузки страницы
document.addEventListener('DOMContentLoaded', function() {
// элемент, содержащий контент модального окна (например, имеющий id="modal")
const elemModal = document.querySelector('#modal');
// активируем элемент в качестве модального окна с параметрами по умолчанию
const modal = new bootstrap.Modal(elemModal);
// при клике
document.addEventListener('click', function(e) {
// получим цель (элемент на который нажали)
const target = e.target;
// завершим выполнение функции, если цель не имеет атрибут data-list
if (!target.dataset.list) {
return;
}
// получим содержимое списка
let html = document.querySelector(target.dataset.list).innerHTML;
// установим .modal-body содержимое html
elemModal.querySelector('.modal-body').innerHTML = '<ul>' + html + '</ul>';
// откроем модальное окно
modal.show();
});
});
</script>
<ul id="list-1" class="d-none">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul id="list-2" class="d-none">
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ul>
<button type="button" class="btn btn-primary" data-list="#list-1">modal с одним списком</button>
<button type="button" class="btn btn-primary" data-list="#list-2">modal с другим списком</button>
<div class="modal fade" id="modal" tabindex="-1">...</div>
Если при открытии modal меняется его высота, то вы можете вручную обновить его положение посредством вызова метода handleUpdate()
:
modal.handleUpdate();
События
В Bootstrap генерируется несколько событий для модальных окон. Используя их вы можете добавить свой код, который будет выполняться при их наступлении.
Инициируются события на элементе .modal
.
<!-- Bootstrap 5 -->
<div class="modal fade" id="modal" tabindex="-1">...</div>
<script>
// получим модальное окно
const elemModal = document.querySelector('#modal');
// срабатывает сразу после вызова метода show
elemModal.addEventListener('show.bs.modal', function(e) {
// ...
});
// после того как становиться видимым (после завершения CSS-переходов)
elemModal.addEventListener('shown.bs.modal', function(e) {
// ...
});
// срабатывает сразу после вызова метода hide
elemModal.addEventListener('hide.bs.modal', function(e) {
// ...
});
// после того как становиться скрытым (после завершения CSS переходов)
elemModal.addEventListener('hidden.bs.modal', function(e) {
// ...
});
// когда пытаемся закрыть modal с помощью Esc или клике по фону, но это отключено с помощью соответствующих параметров
elemModal.addEventListener('hidePrevented.bs.modal', function(e) {
// ...
});
</script>
В третьей и четвёртой версии:
<!-- Bootstrap 3 и 4 -->
<div class="modal fade" id="modal" tabindex="-1">...</div>
<script>
// срабатывает сразу после вызова метода show
$('modal').on('show.bs.modal', function(e) {
// ...
});
// после того как становиться видимым (после завершения CSS-переходов)
$('modal').on('shown.bs.modal', function(e) {
// ...
});
// срабатывает сразу после вызова метода hide
$('modal').on('hide.bs.modal', function(e) {
// ...
});
// после того как становиться скрытым (после завершения CSS переходов)
$('modal').on('hidden.bs.modal', function(e) {
// ...
});
// когда пытаемся закрыть modal с помощью Esc или клике по фону, но это отключено с помощью соответствующих параметров
$('modal').on('hidePrevented.bs.modal', function(e) {
// ...
});
</script>
Например, отобразить сообщение пользователю о том, когда модальное окно будет закрыто (полностью скрыто от пользователя):
<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">×</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>
Результат представленного выше примера представим в виде следующих изображений:



2. Использование сетки Bootstrap для разметки содержимого модального окна
Для того чтобы использовать систему сеток платформы 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>
3. Переключение между 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>
Пример переключения между двумя модальными окнами можно посмотреть в песочнице.
4. Например, создать модальное окно, которое в зависимости от нажатой кнопки имеет то или иное содержимое.
<!-- Кнопки, открывающие модальное окно 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>
Комментарии: 485
модалка на http://tsknnmgc.beget.tech/ содержит форму ajax, при отправке формы после заполнения (правильного, неправильного - все едино.. или при обновлении страницы) окно закрывается вместе с сообщениями об отправке/ошибке, которые в модальном окне отображаются в это время... А нужно, чтобы событие обрабатывалось полностью в модалке - т.е. открытая модалка закрывалась бы ТОЛЬКО принудительно, с кнопки "закрыть окно". Вопрос: как сие реализовать ?!
Чтобы модальное окно не закрывалось при нажатии вне него, нужно добавить атрибут
data-bs-backdrop="static"
:не работает data-bs-backdrop="static"... нет, он не дает закрываться окну если нажимаешь на фон :) это да... но речь о другом - при заполнении ajax-формы и ее отправке - модальное окно закрывается, даже если поля заполнены неверно, сообщения об ошибках или результе отправки сим остаются втуне.... т.е. вроде как понимаю так, что происходит обработка данных полей ajax-формы и модалка схлопывается до того, как получен ответ от сервера
Значит её как-то закрываете с помощью JavaScript кода. Тут нужно смотреть, что написано в коде.
в том то и дело, что не использовал никаких скриптов... только стандартное модальное окно bootstrap/forma ajax/formit Впрочем, смотрите сами (в сообщение код не убирается, прилагаю во вложении):
Вставил эту форму в модальное окно Bootstrap, всё отлично работает. Модальное окно не закрывается.
и еще как сделать так что би когда била например ничья то ето модальное окно висвечиволось и там било написано ничья а когда нажал на ок то оно сработало как функция рестарт?
Помогите пожалуйста, очень нужна помощь!!! Заранее спасибо!!!
1. Необходимо подключить CSS и JavaScript файлы Bootstrap 5 к странице.
2. Вставить HTML код модального окна в body:
3. В свой JavaScript файл добавить в самом вверху:
4. После этого заменить во всех местах метод alert() на функцию showModal():
У меня есть таблица (Фамилия, Имя и т.д., и в каждой строчке кнопка Delete)
для этой кнопки как раз делаю модальное окно (для подтверждения)
Соответственно, нужно в это модальное окно передать ФИ и ссылку, по которой будет происходить непосредственно удаление (по id, т.е. .../{id}).
Но у меня туда передаются данные всегда с первой строки на текущей странице, на какую бы строку я не нажал. Подскажите, как передавать данные, соответствующие выбранной строке?
Код:
Если требуются какие-либо еще изменения, то я, видимо, не понял, где именно ((
P.S. Забыл указать, что это в приложении, используется thymeleaf.
У меня кнопка вызова модульного окна и само модальное окно находятся в табе.
Проблема в том, что при вызове модального окна с активного (текущего) таба class=«tab-pane active» удаляется класс active а мне это совершенно не желательно.
Подскажите, как с этим побороться?
Мне это не нужно. таб должен оставаться открытым независимо от модальных окон.
<input type=«text» class=«form-control» th:name=«componentName» th:value="${incident.getComponentName()}" id=«componentName»>
Но текст был большим и пришлось поменять на <textarea class=«form-control», из-за этого пропало предзаполнение. Подскажите, пожалуйста, как исправить? Или можно вернуть как было, но расширить поле ввода текста, главное чтобы при открытии модалки текст полей был и само поле для ввода не мизерное :(
Можно просто добавлять hash к URL при открытии модального окна:
Для открытия модального окна сразу после загрузки страницы, если в URL присутствует хеш, можно осуществить просто добавив после JavaScript кода приведённого следующего ещё следующий:
Для share кнопок чтобы передавать вместе с URL хеш, его тоже нужно добавить.
А в Edge такой ошибки нет. Как исправить?
В модальном окне бутстрап располагаю как бы стандартную форму для добавления новой записи в БД. Все поля формы передаются по клику на кнопке «button» в js и дальше через ajax в другой файл php, где происходит их проверка и, собственно, запись в БД. Все отрабатывает хорошо, за исключением одного — одно из необходимых полей, это textarea, к которому подключается ckeditor 4. Скрипт ckeditor прописан здесь же в окне, непосредственно после поля textarea. На обычных страницах все отрабатывает «на ура», а при попытке получить в переменную значение из editor-a, расположенного в модальном окне, попросту ничего не передается, хотя сам editor отображается в окне корректно. Как получить значение из него???
кнопка
этот код
стили СSS
первые два работают стиля, третий подсветку после нажатия не убрал (с ним или без него — отображение кнопки одинаково)!
Существует ли какая программа/приложения, что может полностью отобразить всю структуру HTML и стилей CSS? В инструментах разработчика я не могу найти это свойство кнопки (если так ведет себя кнопка, где-то это прописано)!
СПАСИБО, возьму на заметку еще и это свойство.
Фото окна после клика по поповеру!
Это не критично, но для себя было бы интересно и познавательно понимать!
Спасибо еще раз и хорошего дня!
Тоже, ничего не поменялось. Пробовал в разных браузерах, работаю в хроме, в опере — тоже самое, експлорер вообще поповер не отображает, а рамочка пунктиром взялась! Завтра еще все пересмотрю.
Бывали случаи, когда нахожу атрибут в панели разработчика — меняю параметр, смотрю изменения. Беру прям оттуда копирую в саблайн (добавляю important) — И НИЧЕГО НЕ ПРОИСХОДИТ! Поэтому, идеальный вариант найти свойство в панели разработчика и задать значения там! Почему так бывает — не пойму, браузер — сбрасываю кеш, пробую другие браузеры… где-то тормозит… Грешил на саблайн, скачал пропатченую версию, думал не будет появляться надоедливое сообщение… так началось выскакивать — обнови программу, обновил — и снова исходное сообщение…
Думаю, будет интересно.
МНЕ ПОМОГЛО «подсветку кнопок убрать:
Спасибо!
В том то и дело, что окно не открывается спустя, даже, час! После добавления модального окна появилась ошибка в браузере! itchief.ru/assets/uploadify/4/b/6/4b6cd8997792e9bd30f3c17de4773d17.jpg
Возможно здесь причина?
Еще одно затруднение.
Стилизовал кнопку:
Если будет работать без !important, то тогда его можно убрать.
Если без сервера, то создаёте в JavaScript массив из объектов. В объекте создаёте ключи для вопроса, ответов, правильного ответа и других данных в зависимости от логики. Далее создаёте обработчики событий для кнопок, в которых пишите необходимую логику. В общем как-то так.
Начало от первого
Соответственно второе
Содержимое полностью одинаково, разница лишь в id и форме
Не могу понять, где ошибся, если одно из окон убирать то оба работают по одиночке, если оба кода вставлены то первое работает а второе просто затемняет экран и всё.
Прошу вашей помощи, не могу самостоятельно решить задачу.
Есть кнопка:
При нажатии открывает: modal окно с информацией и двумя кнопками
При нажатии: «Заказать звонок» окно закрывается и открывается Modal Feedback Form.
Всё отлично работает окно закрывается отправляю сообщение всё тоже замечательно.
После отправки хочу открыть Modal в котором будет сообщение об успешной отправке, при открытии #modalSuccess ==> закрыть: #modalFeedbackForm
После успешной отправки окно так и не могу заставить закрыться и показать #modalSuccess.
Что именно я не так делаю подскажите пожалуйста.
Пока по прежнему не открывается новое окно.
Я нашёл решение.
P.S. У меня на странице несколько разных блоков с контентом, списком (input type=«radio»), но структура модального окна и данные будут равного кол-ва значения разные, за исключением того что при вызове с разных блоков запись на сервере будет писаться в разные таблицы в БД.
Спасибо!
Зачем столько лишних обёрток вы используете в HTML?
Установка фиксированной ширины колонкам осуществляется с помощью CSS. Как это выполнить приведено в примере.
Обычно, HTML код Modal помещают в body и не вкладывают ни в какой другой элемент.
Пример: itchief.ru/examples/lab.php?topic=bootstrap&file=b4-navbar-modal
Картинка: перейти
Для того чтобы сохранить дату последнего показа окна (элемента) можно воспользоваться хранилищем LocalStorage.
Пример решения подобной задачи можно посмотреть здесь.
CSS код:
HTML код:
JavaScript сценарий:
Если необходимо сделать чтобы он работал на разных страницах, то сценарий необходимо переделать. Например так:
P.S. По идее если модальное окно скрыто, находиться в (hide), то по идее я не могу получить значения полей скрытого элемента.
Joomla! 3.8.3 шаблон Protostar сайт
В статье необходимо разместить модуль подписки, чтобы читатель при желании мог подписаться на продолжение.
Реализация модулем «Newsletter Subscriber»
Вставляю в тело статьи
И работает хорошо при условии, что выключен модуль того же автора «Rapid Contact» который используется для заказа обратного звонка.
Вставляю код модального окна в модуль HTML-код
Ищу помощи у Вас потому что: Оба модуля работают нормально при условии что один из них не в модальном окне. Если оба модуля вызываются кнопкой открывающей модальное окно отображается только один модуль в обоих окнах.
Самостоятельные попытки результата не принесли. Пожалуйста если есть решение — Подскажите.
Спасибо
Создал ссылку, которая открывает модальное окно . И встал вопрос, а как передать в модальное окно значение переменой (или несколько значений) с которой бы я мог работать.
Например:
Использовал следующий код, что бы реализовать задуманное. Но в валидации браузера выдает ошибку: TypeError: $(...).modal is not a function. (указывает на эту строку ). Я не могу понять в чем дело.
В плагине Gridify есть ошибка, она не вычисляет высоту контейнера.
Попробуйте использовать вот эту исправленную версию плагина Gridify.
Как в моём случае правильно применить параметр handleUpdate модального окна?
Используется Bootstrap4.
Модальное окно полностью формируется и вставляется в DOM при помощи javascript.
В процессе, когда окно открыто, его размеры могут измениться. Т.к. в модаль будут подгружаться данные из сервера и содержимое модали измениться.
Если я правильно понял, необходимо написать что-то вроде этого:
Или же handleUpdate можно указать как часть передаваемого объекта? т.е.:
Заранее спасибо!
Параметра handleUpdate нет, есть только метод.
Т.е. мы передаём строку 'handleUpdate' в качестве аргумента в метод .modal(), а не используем метод handleUpdate().
Почему и возникает вопрос. Нужно применять метод modal() с аргументом handleUpdate к открытой модали?
Или можно передать handleUpdate сразу при инициализации модали?
Его (handleUpdate) необходимо вызывать после загрузки контента, т.к. вы указали:
И последний вопрос. Т.е. handleUpdate необходимо вызывать каждый раз, когда в модали изменяются данные? Например:
Открыл модаль, показал изначальное содержимое;
изменил данные в .modal-body;
сделал handleUpdate;
ещё раз изменил содержимое .modal-body;
ещё раз применил handleUpdate;
закрыл модаль…
Или же достаточно вызвать handleUpdate один раз, а дальнейшие изменения будут отслеживаться автоматом?
Такой вопрос, у меня в модальном окне отображается контент (товарные позиции корзины), если я хочу удалить с корзины в модальном окне товар то у меня закрывается модальное окно как сделать так чтобы после нажатия на кнопку удаления товара товар удалялся и модальное окно оставалось активное. Вот ссылка на кнопку удаления товара Заранее спасибо
Вам не нужно использовать класс data-toggle=«modal». Его необходимо использовать только для переключения модального окна.
Подскажите, не смог разобраться. Как открыть модальное окно в модальном окне?
Например:
1. Открываем список контактов (там всякие кнопки: телеграмм, скайп, вибер и список телефонов)
2. Нажимаем на список телефонов
3. Окно с списком контактов пропадает и появляется окно с списком телефонов
Заранее спасибо
$(первое окно).off('hidden.bs.modal').on('hidden.bs.modal',function(){
$(второе окно).modal('show');
$(this).off('hidden.bs.modal');
});
$(первое окно).modal('hide');
закрытие второго окна аналогично
$(окно).off('hidden.bs.modal').on('hidden.bs.modal',function(){
//манипуляции с окном
$(this).off('hidden.bs.modal');
$(окно).modal('show');
});
$(окно).modal('hide');
Есть окно, контент в которое подгружается аяксом(быстрый просмотр товара). Из этого окна вызывается 2е окно (вы положили в корзину… продолжить покупки или перейти в корзину). Проблема заключается в том, что второе окно размещается в размерах первого, при этом, если размеры второго окна больше первого, то в первом появляется полоса прокрутки. При этом при закрытии второго окна (data-dismiss=«modal») — закрываются оба. Можно ли сделать так, то бы 2 окно не зависело от размеров 1?
Вызов 1го окна:
Само окно:
Содержимое окна 1го окна, оно же содержимое 2го:
Вызов 2 окна:
Я пытался удалять все поля с капчей и добавлять новое с телефоном, все правил, а у меня то неактивна кнопка отпраить была, то потом при проверке пишет, что не все поля заполнены (имя), хотя вроде все упоминания везде убирал
Самый минимальный набор полей какой у кого? Поделитесь!
При отправке формы, даже если не прошла аякс валидация, окно закрывается. Если окно открыть повторно, то видим либо форму, с ошибками валидации, либо сообщение об успешной отправке. Можно ли сделать закрытие окна именно по нажатию на кнопку окна «закрыть», а не по нажатию на кнопку формы отправить?
Есть код который вызывает окно
После чего человеку дается выбор ( 2 кнопки ) и открывается другое окно в котором нажимая на кнопку происходит небольшой скролл автоматически в верх и первое окно снова открывается Вопрос в том как сделать чтобы окно открылось только один раз, Но при перезагрузки страницы код при скролле снова сработал и открыл окно один раз?
После определения функции указать из какого модального окна можно открыть другое:
Можно даже так:
В этом случае из любого модального окна можно будет открыть другое модальное окно (при наличии соответствующей ссылки).
Опишите пожалуйста более детально.
Вот что есть, не работает:
Второй вопрос:
Если нужно окон очень много, то только добавлять вот так или есть ещё какой способ.
Если нужно что-то более сложное, то можно посмотреть ещё здесь.
И всё-таки: можно ли вызвать модальное окно без использования JS — допустим с помощью неких «хитрых» data-атрибутов? Понятно, что оно будет всплывать каждый раз при загрузке страницы, но мне именно этого и хотелось бы.
Спасибо.
При нажатии на кнопку отправить появляется зеленая галочка, но ничего не происходит, хотя без окна на странице сайта форма полностью рабочая.
В чем может быть причина?
слетает работа всех скриптов на сайте, ссылки, кнопки, анимашки…
redside.kupitekvartiru.com/ в разделе планировки. Не совсем понятно, как часть информации (картинка и текст) сделать динамической в зависимости от выбора планировки, а часть — форму — статической.
при открытии окна select схлопывается в 0px и естесвенно его не видно и выбрать нельзя!
в последний div пытаюсь заставить работь с datapicker тоже не получатся инициализировать скрипт
Заранее благодарен
Pfhfytt ,kfujlfhty
Для того чтобы вы могли инициализировать datetimepicker, необходимо подключить соответствующий плагин. Всё это необходимо делать в следующем порядке: jquery -> jquery-плагин datetimepicker -> ваш скрипт.
Спасибо за труды.
Подскажите, как держать модальное окно постоянно открытым для редактирования.
Использую SublimeText и после каждого обновления index или css окно закрывается и приходится щелкать на кнопку для вызова модального окна.
Попробуйте добавить в CSS следующее:
itchief.ru/assets/uploadify/a/1/b/a1bc78739573a92ce8d0b006d2e5a354.jpg
Помогите разобраться, в чем может быть проблема? При вызове модального окна задний фон (основная страница), контент смещается влево.
А в чем проблема?! Либо css прям в конкретном окне прописываете, либо по его уникальному ID
#myModal.modal-dialog {
width: 500px!important;
}
не помогает…
Подскажите, пожалуйста, если не затруднит. Хочу реализовать аутентификацию, регистрацию как
здесь. Но только чтобы она работала через модальное окно. Пытался сделать следующим образом:
Форму myLoginChunk приводить не буду, чтобы не захламлять, т.к. она практически идентична вашей.
Все бы замечательно, только после события click (без заполнения полей «Пользователь» и «пароль») на «SignIn» вылетает на главную страницу и при повторном вызове модального окна аутентификации видна ошибка из errTpl, т.е. форма не обновляется.
Подскажите, пожалуйста… где только не лазил. Сильно не пинайте новичка )
Спасибо!
itchief.ru/assets/uploadify/4/7/f/47f3c698ed2a61a9bf027a1dc9058a33.jpg
В чем причина? Спасибо.
Ознакомься с комментариями в этой ветке: #comment-3892
Попробуй установить модальному окну более высокое значение z-index:
Скриншот: itchief.ru/assets/uploadify/8/f/e/8febf32af7f8eddff1a6db2932bd7c54.jpg
Отображается модальное окно под слоем opacity (не кликабельно). Сталкивался кто-нибудь с такой траблой. Прошу помощи. Наперед благодарен.
Если же вам необходимо решение на базе модального окна, то можно сделать так:
Для изображений, которые необходимо открывать в модальном окне следует добавить класс pic.
2. К необходимым элементам img добавить класс pic, т.е. к тем, которые необходимо отображать в модальном окне
3. Скрипт в любом месте после подключения файла bootstrap.min.js.
itchief.ru/assets/uploadify/c/4/6/c4659b7f5a7905b1970b7e9fbfd4fd2d.png
itchief.ru/assets/uploadify/c/4/6/c4659b7f5a7905b1970b7e9fbfd4fd2ds.jpg
Здесь 2 варианта решения проблемы:
1. Установить модальному окну большее значение z-index чем меню (или наоборот):
2. Немного сдвинуть модальное окно вниз:
По кнопке модальное окно открывается, а при загрузке — нет.
Использовался ваш пример.
Код:
1. Для этого необходимо плагин Bootstrap (поместить в конец, т.е. после других плагинов jQuery)
2. Написать скрипт (например, для модального окна)
3. После этого инициализация модального окна будет осуществляться следующим образом (т.е. не modal, а bsModal):
Можно сделать так (используя относительное и абсолютное позиционирование).
Код HTML:
Код JavaScript:
Наиболее простой способ этого избежать — это отказаться от атрибута data-toggle. Т.е. открывать модальное окно с помощью JavaScript. В этом случае он не сможет обратиться к элементу, имеющему атрибут data-toggle со значением modal.
Т.е. следующим способом:
Прокручиваю кнопку, вот в такое положение:
itchief.ru/assets/images/bootstrap/j7s7q.png
Нажимаю, появляется модалка:
itchief.ru/assets/images/bootstrap/fi3wc.png
Закрываю модалку, страница прокрутилась:
itchief.ru/assets/images/bootstrap/nlfxd.png
Тоже происходит и у меня только в больших масштабах…
Например, добавив к адресу "#modal" или как то еще?
Если необходимо это сделать после перехода на страницу, то надо написать скрипт:
Т.е. получить хэш страницы и сравнить его с #modal. Если он равен, то открыть модальное окно.
landpg.zzz.com.ua/#portfolioModal2
Скажите, вот вы тут написали код для кнопки и модального окна. Вопрос, где стили? Просьба выложить отдельно файл со стилями для кнопки и формы модального окна. Спасибо.
Это кнопка и модальное окно фреймворка Bootstrap. Если вам нужны не только эти элементы, а весь набор данной платформы, то скачайте её. Информацию о том, как это сделать, можно почитать в этой статье Установка платформы Twitter Bootstrap.
Если вам нужны только эти конкретные элементы, то перейдите на страницу _http://getbootstrap.com/customize/ и выберите только нужные. Потом пролистайте данную страницу вниз, нажмите кнопку и получите платформу, состоящую только из этих компонентов. Если Вам необходимо выдернуть эти стили, то откройте файл bootstrap.css (не сжатый) и скопируйте необходимые строчки в свой файл стилей. Он кроме кнопок, будет содержать ещё и базовые стили. Если они вам не нужны, то прокрутите содержимое файла до кнопок и скопируйте их. То же самое необходимо выполнить и для модального окна. Приводить содержимое CSS не буду, т.к. надеюсь, что довольно подробно описал, что надо сделать. Для работы модального окна необходим ещё код javascript, он находится в несжатом виде в файле bootstrap.js. Можете тоже его просто скопировать себе в свой файл скриптов или подключить так.
Код:
на: Код:
То есть, к примеру, есть site.ru и 2 окна — #modal1 и #modal2. И чтобы, к примеру, посещая site.ru/?q=#modal1 — сайт открылся с уже показанным окном #modal1.
Используйте в JavaScript функцию для получения GET-параметров:
После этого в коде определяйте есть ли необходимый параметр в URL и открывайте необходимое модальное окно:
site.ru/?q=modal1 // открывает 1 модальное окно
site.ru/?q=modal2 // открывает 2 модальное окно
Код:
Спасибо, так помогла ваша инфо о модальном окне. Как раз то, что нужно было для моей задумки!!! Но беда, окно не хочет срабатывать в firefox.
Посмотрите, пожалуйста, что я неправильно сделала lyguta.inf.ua
Не надо в элемент button помещать a.
Используйте 1 элемент: a или button.
Например, button:
Использую одно модальное окно для редакции данных моделей. Когда открывается модальное окно, должны поменяться данные в форме и др. для конкретной модели. Это все сделал через скрипт.
Скрипт:
Проблема в том, что данные в форме обновляются только после появления модального окна. А нужно сначала обновить данные, а потом открыть модальное окно. Вроде оно так и должно произойти, но открытие происходит во время работы аякса.
То, что Вы описали, не может случиться мгновенно.
1 Вариант. Можно сделать так, как Вы это сделали выше. Т.е. сразу отображать модальное окно. Но немного изменить код, а именно: добавить какую-нибудь вращающуюся иконку и как только данные придут с сервера, убрать иконку и отобразить данные.
2 Вариант. Повесить обработчик не на открытие формы, а на элемент, с помощью которого Вы открываете модальное окно. В этом обработчике сначала получить данные с сервера, обновить код модального окна, а потом его открыть. Если задержка при получении данных невелика, то пользователь этого не заметит.
Код:
Подскажите, как можно сделать следующее: внутри модального окна есть ссылка:
Как сделать, чтобы при нажатии на неё, модульное окно «пропадало»? Спасибо.
itchief.ru/assets/uploadify/6/a/5/6a5406a3b0bdb260c10fb4b4d56c24e9.png
А если, например Вы у кнопки укажете data-target=''.modal'' и у Вас на странице есть несколько модальных окон (class=''modal fade''), то будут открыты (выбраны) столько модальных окон, сколько из них имеют класс modal.
Чтобы разобраться с этим вопросом, можно почитать статью про CSS селекторы.
Подскажите, у меня в модальном окне вставлена форма обратной связи.
В форме есть проверка на неправильно введенный e-mail.
Если пользователь заполнит форму и нажмет «Отправить», то модальное окно скрывается.
А как сделать так, чтобы окно не скрывалось, ведь пользователь должен увидеть, что e-mail указан не верно.
Либо если указал верно, то он должен увидеть сообщение, что форма отправлена, но он не видит этого, так как модальное окно закрывается.
Спасибо!
Посмотреть, как это можно выполнить можно в статье Выезжающая форма обратной связи.
Например, на этом сайте _http://bootstrap-3.ru/javascript.php#modals" есть эта проблема. Т.е. при открытии демо модального окна добавляется «padding-right:0px» и сайт дергает вправо. А вот на http://getbootstrap.com... сайте такого нет, там добавляется «padding-right:17px» и всё в порядке. Что там, что тут используется один и тот же «bootstrap.js».
Спасибо.
А как сделать окно фиксированной высоты/ширины. Я в окно вывожу список и элементы списка периодически добавляются.
Более гибко, если это надо можно настроить с помощью медиа запросов:
Не подскажете, как сделать так, чтобы скрипт запускался только на больших экранах? Модальное окно появляется при заходе пользователя на страницу.
Соответственно кнопки, которую можно скрыть нету =(
Очень нужна помощь: не соображу, как создать такое модальное окно, которое бы всплывало при первом входе посетителя на сайт, блокировало бы сайт и не закрывалось, пока посетитель не кликнет по кнопке в модальном окне. Это нужно для подтверждения, что посетителю исполнилось 18, а если он не подтвердит, то сайт для него не будет доступен.
Решение будет таким:
Плюс скрипт, который будет открывать модальное окно после загрузки страницы:
Спасибо Вам за Ваши труды, очень всем помогаете! ))
Подскажите, пожалуйста, как решить задачку: Необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом. При этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано). Пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно ))
Вот собственно пример.
Код
Помогите, пожалуйста, реализовать данную функцию?
Буду очень рад Вашей помощи! Уж очень выручите ))
В JavaScript невозможно определить на каком расстоянии курсор находится от кнопки закрытия вкладки страницы или браузера. Следовательно, реализовать подобный функционал просто не представляется возможным.
Ну а если вариант, при попытке закрыть вкладку браузера?
и после запоминалось это посещение, чтобы больше окно для такого пользователя не появлялось…
буду очень благодарен за помощь, если такой вариант возможен, конечно.
А если привязать функцию, когда курсор уходит за пределы окна, боди например, показывается окно. Т.е. увели курсор в направлении закрытия страницы, только он дошел до верха _ сразу модал
HTML-код...
Модальное окно:
Код модального окна...
Подключены только bootstrap.js и jquery.js.
Собственно с модальным окном все OK. Но, при открытии в новой вкладке открывается только ссылка сайта+ID в href.
Добавить к странице скрипт:
1. Добавить к каждой кнопки класс, например mybtn
2. В модальном окне к элементу img добавить класс myImageModal
Скрипт будет следующим:
Зачем такие сложности, тем более что несколько пользователей могут иметь один ip. Т.е. Вам необходимо будет иметь базу данных, где необходимо будет хранить ip адреса, дату отображения модального окна и т.д.
Лучше использовать для этого cookie или LocalStorage браузера пользователя. Т.е. заводите в хранилище браузера пользователя параметр, например, showModal и сохраняете в качестве его значения дату показа модального окна. Если дата не соответствует текущей, то отображаете модальное окно, иначе не показываете.
Как это сделать, можно посмотреть в этом комментарии.
Через каждые 5 часов:
Если Вам нужно ещё учитывать IP, то в данном случае только через сервер.
Есть форма с выбором (селект): itchief.ru/assets/uploadify/2/f/8/2f8517d0e06cd3a71a79abca0561ef39.png
По нажатию кнопки «оплатить», необходимо передать в модальное окно значение, в данный момент выбранное в форме. Подскажите, как это можно сделать.
2. В обработчике этого события:
2.1. Получить выбранное значение и сохранить его в некоторую переменную:
2.2. В модальном окне получить элемент, в который необходимо вывести это значение:
2.3. Изменить содержимое этого элемента:
2.4. Открыть модальное окно.
В итоге получится следующий код:
1. При нажатии на кнопку, получить блок, к которому относится эта кнопка.
2. Получить необходимые элементы.
3. Вставить эти элементы в модальное окно.
Код JavaScript...
Код...
Стили — стандартные Bootstrap, кроме:
Проблема в том, что на смартфоне (Android) экранная клавиатура закрывает поле input, т.е. приходится скролить вручную, чтобы увидеть что вводится. Возможно ли с помощью JS исправить положение input при выводе клавиатуры?
Проблема следующая. У модального окна есть ограничение, связанное с рендерингом положения элементов при вызове экранной клавиатуры на устройствах iOS. Частично проблему можно решить, изменив у модального окна свойство position в absolute. Я попробовал такой скрипт:
Код:
Он работает. Окно позиционируется как абсолютное, а подложка (modal-backdrop), по таймеру, успевает перерисоваться под размер модали. При вызове экранной клавиатуры фокус работает нормально, и нет неприятных скачков. Но! Модальное окно скролится вместе с документом, и если документ длинный, а модальное окно маленькое — получаются неприятные пустоты сверху и снизу. Повторюсь, речь идет только про iOS устройства.
Есть ли какие-то другие способы избежать скроллинга документа вместе с окном?
Попробовал задержать по таймеру корректировку фокуса, но тоже не получается.
Другой вариант:
Код:
По умолчанию у .modal позиция fixed. Позиция меняется при фокусе на input и возвращается при blur. Попробовал запомнить текущее расположение window и вернуть обратно. Происходит то же самое, окно modal скролится в начало документа.
Как бы половчее сделать три шага:
1. Вывести модальное окно (с этим понятно).
2. Заставить его повисеть 15 сек.
3. Убрать окно не по кнопке, а по истечению этих 15 сек.
delay() не работает в комбинации с $('#myModal').modal('show') и$('#myModal').modal('hide').
2. Написать скрипт:
Не подскажете, как правильно их взаимно спозиционировать (код модального окна, скрипт, контроллер)?
Кто-нибудь имел опыт размещения Яндекс карты с определенной точкой на карте в модальном окне?
Код:
Создана carousel с фото и необходимо, чтобы модальное окно открывалось при нажатии на гиперссылку картинки.
Как это сделать, к сожалению, не можем разобраться.
Можно использовать следующий код:
1. Оставить только одно модальное окно и разместить его сразу под открывающим тегом body:
Код модального окна
2. Избавиться от кода JavaScript расположенного в контенте страницы.
3. Добавить следующий JavaScript код в конце HTML перед закрывающим тегом body. При желании можно вынести в отдельный js-файл и подключить его к странице.
Код JavaScript:
Описание кода:
— заведём переменную contentModal. Она будет содержать данные, которые будут отображаться в модальном окне. Для каждой картинке необходимо указать, что будет отображаться в модальном окне: 1 — это название модального окна, 2 — это содержимое модального окна. Оформлено это в виде массива. В примере данные содержатся для двух картинок, в вашем необходимо добавить ещё 4.
— остальное содержимое скрипта добавляет клик на элемент div, содержащий картинку. При нажатию на элемент, мы получаем класс у элемента (например, card-image2). После этого изменяем содержимое заголовка и тела модального окна. Далее отображаем модальное окно.
1) На странице index.html 13 модальных окон и в каждом из них должен быть код youtube с rel=0&autoplay=1 (автостартом). Они все при загрузке index.html начинают петь.
2) Нужно, что бы каждое модальное окно было в новом файле myModal.html, myModal2.html и т.д.
Было автозакрытие видео, а то у меня используется огромный повторяющийся код.
Код:
Повторять бы его много раз не хотелось. Спасибо за внимание. Жду ответа с нетерпением.
Вот, например, ответ на то, как сделать, чтобы модальные окна были в разных файлах и загружались при нажатию на кнопку:
Ссылка на комментарий 1389.
Пробовал что-то вроде такого:
Но прикрутить не получилось, открывает модальное окно и скроллит его до заголовка, может это фишка такая, по любому плавно прокрутить до заголовка.
Но лучше так (с анимацией):
А как можно составить и вычислить скролл по такой формуле:
$('#myInput').offset().top — (Высота всей страницы — высота окна)
Когда страница без скролла скрипт отрабатывает отлично, но как только появляется скролл на странице, в модальном окне идет смещение и myInput улетает вверх, предполагаю на разницу высоты…
Есть вот такая разметка.
Код разметки
Подскажите, как должна выглядеть функция ModalOpen, чтобы с помощью неё можно было корректно открывать соответствующее модальное окно при клике по td?
Создавать такую разметку не стоит, т.к. Вы смешиваете HTML и CSS и JavaScript. Потом впоследствии просто не разберётесь…
Даже если написать функцию Ваш код не будет работать должен образом.
Функция будет выглядеть следующим образом:
Это связано с тем, что у событий JavaScript есть всплытие, и, например, при нажатии на закрытие модального окна, Вы опять тем самым вызовите модальное окно. Это происходит из-за того что после нажатия кнопки закрыть, событие клик начинает всплывать и доходит до td и опять вызывает модальное окно. Вот так… А запретить всплытие, как Вы написали, невозможно.
Единственный выход перенести все модальные окна сразу после открывающего тега body. Это не только правильно, но и Ваш код будет работать.
Да вижу, что работает не совсем корректно.
Вынести все модальные окна под открывающий тег bоdy — не реально, т.к. контент генерируется динамически vbs-ом. Вынос модальных окон в начало документа — усложнит код минимум вдвое.
По данному примеру, как, оказалось, достаточно вынести CSS и DIV с модальным окном выше открывающего td и все нормально заработало.
Напишите скрипт:
Кнопка:
Форма:
Этот момент описывается в разделе «Особенности компонента Modal». Там говорится, что HTML-код модального окна желательно размещать сразу после открывающего тега body.
После открытия и закрытия модального окна вокруг кнопки/ссылки появляется синяя рамочка
Можно ее как-то убрать?
Что её убрать, необходимо найти данную кнопку и при получении ей фокуса, его убрать.
Код JavaScript:
Есть ли какая-то возможность явно указать требуемую ширину модального окна, например 80% ширины рабочей области окна браузера?
Допустим, на странице есть 15-20 модальных окон, каждое из которых открывается при щелчке по соответствующему пункту (обращение идет по id окна).
Соответственно, если я правильно понял из примера, ширина окна, выставляется именно этим самым id.
Следовательно, возникает вопрос. Как показывать именно нужное широкое окно?
Если Вам необходимо установить свою ширину некоторому окну, то в CSS это будет выглядеть следующим образом:
Есть вероятность, что он немного не в этот раздел, а в формы. Но, возник в связи с отображением select-а именно в модальном окне.
Есть обычного размера (как в примерах) открытое модальное окно. В нем форма с select-ом: Можно как-то побороть вот это выползание вправо за пределы selecta?
А с чем Вы хотите бороться?
Наилучший вариант — это сделать пункт таким же коротким, как и другие. Можно конечно поступить жестоко и его обрезать. Но тогда как пользователь узнает что он выбрал.
Другой хороший вариант, если Вам всё-таки нужны длинные тексты — это использовать, например, компонент dropdown. Он позволяет создавать многострочные выпадающие списки. Т.е. когда один пункт, если он не влезет, переносится на другую строчку.
Может, есть под bootstrap стилизация select-ов типа вот такого компонента?
А-то этот не очень с dootstrap-ом дружит. Работает, конечно, но ведет себя не предсказуемо.
Есть ещё такой компонент: Bootstrap MultiSelect
Github: _https://github.com/davidstutz/bootstrap-multiselect
Пример: _http://jsfiddle.net/itchief/rpv1m7wx/
Ещё один компонент:
_https://silviomoreto.github.io/bootstrap-select/
Где-то работает хорошо, где-то скачет по странице при открытии списка,
Где-то, — как будто вообще его не было.
Например, у меня, при вот такой разметке:
Скачет влево при открытии списка.
Вы смотрели, как работает этот элемент? Ни какой компонент, не стили, не JavaScript не смогут расширить Вам элемент select до такой степени. Поведение этого элемента определяется стандартом HTML и соответственно браузером. Этот компонент (jQuery Selectric), когда Вы его инициализируете для select, скрывает его (т.е. настоящий) и подсовывает Вам его копию, выполнению с помощью элементов div, ul, li, стилей CSS и JavaScript. И вы на самом деле работаете не с этим элементом (select), а с его копией. А когда Вы его помещаете в таблицу, он не может вести себя не так… Так как таблицы имеют свою специфику в HTML (другое отображение).
То же самое вы могли бы сделать и с dropdown, т.е. скрыть элемент select. А вместо него «подсунуть» dropdown. После этого связать логику работы dropdown с компонентом select.
Суть в том, что если убрать центровку таблицы, — то скакать перестает. Не критично в принципе.
А как сделать, чтобы модальное окно выезжало до центра рабочей области окна браузера, а не останавливалось в верхней части.
В CSS это меняется посредством изменения margin:
Если Вам необходимо точное центрирование, то необходимо воспользоваться JavaScript:
Попробуйте сделать так.
Код JavaScript
Вот этот вариант точно по центру открывает.
Благодарю.
Вам необходимо сделать следующее:
1. Добавить к ссылке какой-нибудь идентификатор (например, link)
2. Написать скрипт:
Код JavaScript
Вот Ваш пример на _https://jsfiddle.net/itchief/3uzfxpud/
Попробуйте ещё так (js)
Но, прикрутить не получилось (((
Код
Это делается за 4 шага:
1. Кнопки (уже есть)
2. Заготовка (модальное окно):
3. Скрипт JavaScript:
4. Ну и собственно шаблоны (файлы):
authorization.tpl
restorePassword.tpl
registration.tpl
Вот ссылка
_https://drive.google.com/file/d/0ByDpJh5AcnQIMkgtRC1FYjRSaGs/view?usp=sharing
Не совсем понятно зачем Вы используете setTimeout, т.к. обработка ajax запроса даже на бесплатном хостинге не превышает 200 мс. Анимация модального окна и то длится дольше (400 мс).
Вешаем обработчик события click на кнопку, открывающую другое (2) модальное окно. В обработчике прописываем следующие действия:
1. Закрыть 1 модальное окно
2. Повесить обработчик на закрытие, который будет открывать 2 модальное окно. Т.е. когда 1 окно будет полностью скрыто, откроется 2 модальное окно.
Код HTML + JavaScript
Комментарий #629
Комментарий #622
Для загрузки содержимого файла обычно используется метод jQuery load().
Не могу понять, почему не отправляет форму в БД. Раньше все было через шаблонизатор. Я уже сделал все в модальном окне и дальше… не отправляет если можете, помогите.
Код
1. Необходимо убрать атрибут data-dismiss со значением modal у кнопки Добавить.
2. Добавить к форме атрибут action. Т.к. у Вас данные должны куда-то отправляться. Если на туже страницу, то:
Или если через AJAX, то необходимо написать сценарий.
3. Добавить exit после echo «Замовлення Додано!»;
Ещё вопрос. Как сделать, чтобы выводилось и пропадало через 3с? Через AJAX или если есть пример как это сделать…
Для того чтобы некоторый элемент с текстом пропадал, достаточно использовать функцию JavaScript setTimeout() после получения ответа через AJAX.
Когда в одном модальном окне Bootstrap открывается другое модальное окно, есть проблема с классом .modal-open.
Т.е. при открытии модального окна, данный класс добавляется к body. А при закрытии убирается. Так вот когда закрывается второе модальное окно, данный класс удаляется. А он должен быть, т.к. остаётся ещё открытым первое модальное окно.
Попробуйте, добавить следующий скрипт, может быть поможет. Он при закрытии модального окна, проверяет количество открытых модальных окон и в случае положительного ответа, добавляет класс .modal-open к элементу body.
Вам самостоятельно необходимо подписать нужные кнопки в модальном окне на событие click.
Код...
Жаль, что в hide.bs.modal нельзя источник закрытия получить :(
В вашем коде не получиться подписка будет добавляться каждый раз, если несколько раз нажимать кнопку?
Пытаюсь написать калькулятор перевозки грузов. Если не сложно подскажите, пожалуйста, как правильно составить массив городов и расстояний между ними.
Код...
1. Добавить к элементу select (Пункт отправки) идентификатор — point-sending:
2. Добавить к элементу select (Пункт доставки) идентификатор — point-delivery:
3. Написать скрипт:
Пытаюсь разобраться.
Не знаю, что у Вас там не получается…
Пользователи любят нажимать Enter и модальное окно закрывается.
Как сделать чтобы оно не закрывалось?
Поясню: на модальном окне сделана форма ввода, там пару input text, и пару select — с подключенным _https://select2.github.io/examples.html и когда производишь поиск в селект2, набирая несколько букв, то предложенный вариант вполне себе по Enter выбирается и при этом закрывается модальное окно. Как победить?
Например, как-то так:
Сделал немного по-другому.
А многострочный input text перенес в отдельный form-group, у которого не стал отменять нажатие Enter. Иначе он не дает строки переносить :-)
Скорее всего, модальное окно закрывает не Enter, а button c типом submit. если тип поменять на button и отправку данных делать по-другому, то все в порядке.
Отправка формы при нажатии клавиши Enter — это стандартное поведение браузера.
На мой взгляд, лучше всего не переопределять клавишу Enter, а написать некоторую проверку валидности заполненной формы. Если форма валида, то и пусть она отправляется по Enter, а если нет, то показывать ошибки и отменять её отправку.
Я только учусь js и как бы понимаю синтаксис и структуру написания scriptov но не могу найти нормальный справочник с описанием методов свойств и т. д… Может Вы подскажите ссылку на такой справочник, что бы было понятно даже мне (чайнику).
Другого ни чего не подскажу (т.к. не пользуюсь), попробуй поискать через поиск в Яндексе.
А так заглядывай сюда. Со временем попытаюсь написать и про остальные методы так, чтобы было понятно начинающим.
У Вас это и так всё это реализовано.
Единственное что Вам необходимо сделать, это поменять обработчик события click на submit. Данное событие у Вас будет возникать перед отправкой формы на сервер.
Т.е. необходимо выполнить следующее:
1. Добавить идентификатор к элементу form, например target:
2. Изменить метод click на submit, и, конечно же селектор:
Обращаюсь к Вам, так как пока это единственный сайт, где объясняете понятно и доходчиво для всех, в моем понимании.
У меня такого рода проблема, мне нужно, чтобы модальное окно открывалось через какое-то время после открытия index. При отправке формы обязательное прохождение валидации и при обновлении страницы index, не открывалось модальное окно какое-то время. Помогите если это возможно. Мучаюсь неделю.
Ситуация следующая. Имеем страницу оформления заказа. При выборе определенного способа доставки отмечается соответствующий способ оплаты и появляется модальное окно с сообщением и двумя кнопками («Согласен» и «Не согласен»). При нажатии на «Согласен» модальное окно просто закрывается и покупатель дальше оформляет заказ. При нажатии на «Не согласен» — окно закрывается, и сбрасываются выбранный способ доставки и оплаты.
Проблема следующая, если нажать на «Не согласен», перейти на любую другую страницу сайта, а потом вернуться на страницу оформления окно покажется снова (хотя чеки сбрасываются).
Код использую такой:
Подскажите, пожалуйста, где проглядел.
У Вас при выборе способа доставки, открывается модальное окно (#soglashenie-nalogka), если значение переменной hideYesModal ($.cookie('hideYesModal')) равно null.
Но когда Вы нажимаете на кнопку Нет, Вы устанавливаете ключу 'hideNoModal' значение 'true' и нигде больше его не используете. Т.е. у Вас ключ 'hideNoModal' предназначен только для сохранения значения…
Попробуйте, изменить условие открытие модального окна на следующее:
Бьюсь, бьюсь, потом спрошу (вот например, у вас) и дальше продолжаю биться. Иногда не дожидаясь ответа, решаю сам))). Только что решил данную задачу и все задуманное работает.
P.s. Если бы еще код можно было под spoiler прятать, было круто?
Шеф, еще подскажите, как сделать, чтобы это модальное окно показывалось один раз в сутки.
Я так понимаю надо подключить jquery.cookie. На некоторых сайтах есть описание, но там все на английском.
Достаточно изменить код функции с предыдущего примера на следующий:
Большое спасибо Шеф за помощь и за сайт!!! Буду пробовать дальше!!!))))
Как сделать модальное окно, чтобы оно появлялось при загрузке страницы, и чтобы в этом модальном окне отображался обратный отсчет в виде таймера. Допустим таймер на 20 секунд и после этого окно должно само закрыться.
Спасибо за Ваш отзыв. Данная проблема решается следующим кодом.
Код...
Большое спасибо за Ваш сайт и за ваши ответы! Всегда пользуюсь Вашим сайтом, если что не понятно.
Проблема такая, сижу, третий день пытаюсь разобраться.
Нужно связать скрипт выборки bootstrap Typeahead с bootstrap (модальным окном) Modals. Надо чтобы отображалось окно при правильном нахождении в форме Typeahead поиска, и также отображалось при не нахождении! Когда выборка найдена (правильное значение true), то отображается окно, например с текстом «Ваш адрес есть в базе», и false «Вашего адреса нет в базе».
Заранее спасибо!!!
Посмотреть кодкод формы:
код скрипта:
Можно сделать так:
1. Добавить кнопку «Проверить»
2. добавить модальное окно (привожу только часть кода):
3. Добавить такой скрипт:
Данный скрипт запускается при нажатии на кнопку «Проверить». Он проверяет ближайшее совпадающее значение поля (inputUserEditCity) с текущим. В зависимости от результата он изменяет содержимое элемента div, имеющего класс .moda-body. После этого он отображает модальное окно.
Ваш вопрос какой-то не корректный. Если Вы хотите что-то получить с сервера, то надо воспользоваться технологией AJAX. Т.е. Вы получаете данные от пользователя, передаёте их на сервер, там обрабатываете, и получаете какой-то результат, который затем отображаете в модальном окне пользователю. Как-то так…
Спасибо за Ваш труд.
Вопрос такой:
Как сделать так, чтобы при нажатии кнопки «Заказать» на модальном окне появлялось а) либо новое модальное окно с формой заказа, а старое закрывалось; б) либо в этом же окне подгружалась другая страница (нечто вроде пошагового визарда)?
Спасибо, за Ваш отзыв.
Вот решение для варианта a.
Код:
Спасибо.
Попробуйте изменить скрипт на следующий:
Код:
Данный код и так при скрытии модального окна присваивает атрибуту src элемента iframe его же значение. Ну, если Вы используете данный код, то Вам необходимо каким-то образом его доработать, т.е. чтобы он выбирал нужный Вам элемент iframe. В противном случае он выберет первый элемент iframe, который данный код найдёт на вашей странице.
Например, можно сделать так, присвоить необходимому элементу iframe идентификатор (id) со значением video1:
И соответственно изменить код JavaScript так, чтобы он осуществлял работу с iframe, который имеет идентификатор video1:
Я в JS совсем никак, а тут потребовалось… и изучать как обычно времени нет.
подскажите, почему видео в редакторе останавливается, а на проекте нет?
_https://jsfiddle.net/rfxn2nzw/
При такой конструкции в первом файле содержимое #content1 заменяется на #content2 из подгружаемого файла, а вот как это в popup вывести не пойму. Пробовал создавать отдельный див с определенными размерами. В него тоже выводится по id или class, но если я ему пропишу display:none, то ничего не происходит. Без указания ширины и высоты, но без display:none, тоже ничего не выводится. Что не так делаю?
Например:
1. Выбрать в элементе с id=«content2» все элементы кроме h1:
2. Выбрать все элементы p, расположенные в id=«content2»:
Познакомиться, как можно выбирать элементы с помощью селекторов можно начиная с этого урока: jQuery — Основные селекторы
То соответственно выведется пустое окно, но на все вложенные теги не реагирует никак и выводится все без исключений:
Пробовал по-разному, даже класс указывать #content2:not(h1.MyClass). Ноль реакции, никаких исключений, выводится все.
И еще момент, не назначается дополнительный класс к подключаемому файлу, внутри документа все адекватно работает, т.е. может, есть какие-то особые правила с внешними файлами, делаю вроде все по мануалу, а работает выборочно:
Не назначает…
Будет вот так (т.е. все кроме h1):
Второй вопрос. А с чего Вы решили, что класс будет переключаться. Этот код у Вас выполнится только один раз при или после загрузке документа. Т.е. при открытии модального окна он выполняться не будет.
Чтобы этот код вызывался каждый раз, его Вам необходимо привязать, например, к кнопке открывающей модальное окно. В этом случае данный код будет каждый раз выполняться, и соответственно класс MyClass будет переключаться у элементов .modal-body.
Код:
2. Скачать и подключить анимационный движок Velocity (velocity.min.js.zip).
3. Добавить свою анимацию к модальному окну.
Код:
Демо модальных окон с анимацией (velocity.js)
А то использую стандартные возможности с помощью
и далее
Смотрится убого((( и тормозит
А зачем вообще использовать RSForm?
Ужасно тормозит и без того натыканную не нужными «плюшками» Joomla!
Я сделал проще, создал свои формы, и нет проблем. Не нужно никаких доп. модулей и плагинов, свободно любую форму выводите в модальное окно…
Есть скрипт валидации (Вы его писали в одном из уроков):
Код:
Проблема в том, что он работает правильно, если у button тип button, а если тип submit — окно закрывается, и сообщение не отправляется. Можно было бы оставить класс button, но появляется другая проблема. Если в IE11 в незаполненной форме нажать button и попробовать скролить окно, оно неприятно скролится вместе с фоном. Проблему можно решить, прописав body.modal-open свойство position:fixed, но это костыль и на длинных страницах тоже выглядит не совсем хорошо. Что можно добавить в скрипт, чтобы он корректно срабатывал на button с типом submit и отображал alert?
При открытии модального окна, скрипт Bootstrap добавляет body padding-right:17px (это можно увидеть через FireBug). В результате элементы navbar top сдвигаются, чтобы «пофиксить» я добавил в CSS:
Теперь открывается нормально в IE, FF и Chrome на десктопах и IE на WP.
Да, я не обратил на это внимание (кнопка находится вне формы).
Поправьте код на следующий:
Код:
Используя ваш стиль, контент основной страницы в Chrome 44 при открытии модального окна смещается вправо на 17px. Т.к. полоса прокрутки в Chrome 44 занимает ширину рабочей области.
В браузере IE11 при открытии модального окна padding-right:17px к body не добавляется, т.к. в этом браузере полоса прокрутки не занимает рабочего пространства, а располагается поверх его. Т.е. Bootstrap учитывает то, какой используется браузер и определяет добавлять padding-right:17px к body или нет.
Для теста использовал Bootstrap 3.3.5.
Предлагаю такое решение, проверил его только в нескольких браузерах.
Код:
CSS:
Взял отсюда только это:
Но при этом у меня сместилось меню в на 17 пикселей. Добавил к стилю меню смещение на 17px в обратную сторону, и вуаля все работает.
Может что-то изменилось…
Из-за этого мне в своё время и не получилось решить данную проблему простыми стилями без js.
Два окна. После закрытия первого окна всплывает второе. Код использую такой
При закрытии второго оно снова через секунду появляется. Подскажите, пожалуйста, как сделать, чтобы второе окно не открывалось после клика на overlay или на кнопку закрытия. Ну, или само закрылось через какое-то время.
Код:
Проблему решил, но код немного другой получился.
Форма в модальном окне. На submit — окно сразу закрывается, не успев отобразить благодарность за сообщение.
Скажите, имеется ли возможность установить задержку перед закрытием? Click — не отменяем, иначе форма не отправится.
Код, который задерживает отправку форму на 1 секунду:
_https://jsfiddle.net/anohvrg8/5/
Проблема в том, что при нажатии на кнопку окно видно долю секунды, а затем оно сворачивается. Подскажите, в чем может быть проблема? А еще хотелось бы подробнее узнать об атрибутах, как tabindex="-1" role=«dialog» aria-labelledby=«myModalLabel» aria-hidden=«true», которые указаны в примере на оффсайте и у вас в примере про размеры окон, но пояснения особого нет.
Атрибут tabindex. Атрибут tabindex определяет позицию текущего элемента при табуляции. Табуляция – это последовательность при передачи фокуса между определёнными элементами веб-страницы с помощью клавиши Tab. По умолчанию табуляция осуществляется между элементами в порядке их следования на веб-странице. Данный атрибут используется, чтобы нарушить этот порядок. Т.е. Вы можете указать, какой элемент первый получит фокус, какой второй и т.д. Например, если Вы укажите некоторому элементу атрибут tabindex со значением 1, то он будет выбран первым при нажатии клавиши tab на странице. Т.е. значение атрибута определяет порядок табуляции (1 -> 2 -> 3 и т.д.).
Кроме этого данный атрибут имеет специальные значения:
- 0 – особое значение. Если оно установлено элементу, то переход к данному элементу будет осуществлять после всех переходов (1 -> 2 -> 3 и т.д.) и после всех элементов с индексом 0 или без индекса (что одно и то же), которые идут в исходном коде до него.
- -1 – это тоже особое значение. Если вы его установите элементу, то Вы на его не сможете перейти с помощью клавиши Tab. Т.е. данный элемент выпадет из табуляции.
Атрибут role. Атрибут, добавленный в HTML 5 и предназначенный для поисковых роботов, который указывает назначение блока. role=«dialog» – указывает, что данный блок является диалоговым окном.Атрибуты aria-labelledby и aria-hidden предназначены для вспомогательных технологий, например, таких, которые читают веб-страницы голосом. Т.е. они помогают этим технологиям (программам) более правильно прочитать ваш сайт, т.е. делают его более доступным для людей с ограниченными возможностями.
aria-labelledby – предназначен для указания идентификатора (метки) модального окна.
aria-hidden — предназначен для того, чтобы указать скрыт элемент или нет. Если, например его значение равно true, то программа не будет читать его содержимое пользователю.
Посмотрел Ваш сайт. При открытии модального окна у Вас к элементу с id=«header-top» добавляется padding-rigth: 17px в скрипте. Попробуйте это убрать.
Как в модальное окне получить данные, например, id=«100»? Этот «айди» формируется в цикле и может принимать любые произвольные значения!
Код тут: _http://jsfiddle.net/wy6ah8L1/8/
Заранее спасибо!!!
Чтобы получить значение атрибута у одного элемента и передать его в другой элемент необходимо:
1. Получить элемент, содержащий необходимые данные:
2. Получить у него значение атрибута, например id:
3. Получить элемент, в который необходимо вывести это значение:
Итоговый код:
А так, скорее всего вам необходимо проверить свойство left блока, который смещается…
itchief.ru/assets/uploadify/e/9/b/e9b78b203b53fca776c81984303d834d.png
Кнопка есть, но ничего не открывается. Пробовал в разных шаблонах, разные модальные окна… везде есть кроме моего шаблона((
_jsfiddle.net/wy6ah8L1/ — может кто поможет ?? Потому что даже в этом онлайн-редакторе у меня тоже не получается открыть окно. Скорей всего дело в разметке и присвоения каких-то конфликтующих классов или же в таблице стилей… Я новичок… Заранее спасибо за помощь!
_http://jsfiddle.net/itchief/wy6ah8L1/4/
И после этого модальное окно перестало дергаться.
Теперь блин взял и обновил на свою голову Twitter Bootstrap до версии 3.3.1
и все этот скриптик не помогает. Окно всегда дергается, уже весь мозг вынес, не могу добиться, чтобы окно не дергалось. Не знаю, как сделать.
Вам необходимо открыть панель разработчика в браузере, проанализировать исходный код страницы и найти причину.
Это стандртаное модальное окно фреймворка Twitter Bootstrap.
Chief Вам огромное человеческое спасибо!!!)
И такой еще не смертельный вопрос)
Имею вот такую ссылку кнопки закрытия она закрывает выдвижную панель, как к этой кнопке пристроить что-то, что бы она и модальное окно закрывала??
А на счет этого скрипта, что вы написали, что-то у меня не получилось. Никак не могу понять как его подключить…
Вот скрипт который вызывает боковую панель:
А вот скрипт который вызывает модальное окно:
Никак не могу понять, на что смотреть(
Вам и вашему сайту, большое спасибо, развивайтесь!
Просто в браузерах Chrome, Yandex и возможно в некоторых других используется такая политика безопасности совместного использования ресурсов (cross origin) что она не позволяет использоваться ресурсы по протоколу file:///.
Когда Вы выложите свой проект на сервер, то там будет уже использоваться протокол http или https. У вас всё будет работать. Так как данная политика безопасности браузера будет разрешать загружать данные ресурсы с этих протоколов.
Что еще можно сделать??
Пробую сделать но ничего не выходит, я по полный ноль (все сделал как вы сказали, но файл указанный в href не открывается в модальном окне). Вы не могли бы сделать готовое окно? Очень прошу, а то я сам никак не смогу…
Заранее огромное спасибо!
Ситуация такая, имею несколько информеров которые работают в реальном времени. Эти информеры находятся в html файле, вот этот файл и хотелось бы видеть в модельном окне…
Без этой функции, информер начинает загружаться вместе со страницей, это плохо для скорости загрузки сайта, хотелось бы научить модальное оно, загружать информер только тогда, когда пользователь запускает это окно…
Надеюсь на вашу помощь, заранее огромное спасибо.
Для указания удалённого источника используйте атрибут href.
Также необходимо ещё указать модальное окно с помощью атрибута data-target, в котором будет отображаться содержимое этого источника.
Спасибо за примеры.
У меня такой вопрос может постой, но я не могу найти решение. Как закрыть модальное окно сразу после нажатия кнопки submit.
Попробуйте обновиться до последней версии Bootstrap, т.к. модальное окно и так по умолчанию должно закрываться, если Вы нажали на кнопку, у которой type=«submit». Модальное окно Bootstrap не будет закрываться только в том случае, если эта кнопка расположена вне формы:
Поэтому также попробуйте проверить свой код.
Ну, если Вам из перечисленных советов ни чего не помогло, то добавьте событие click на кнопку отправки.
Если вешал на кнопку, то с первого раза не срабатывала, а только со второго.
Спасибо Chief за наметку.
Таблица...
Модальное окно...
Ну и само решение — скрипт на JavaScript...
Нечто подобное реализовано в мобильной версии сайта сервиса Steam, сейчас покажу на картинках.
На первой картинке изображен инвентарь и содержимое (загружается из базы mysql). Допустим, у первого желтого сундука id = 1, кликаем по нему.
itchief.ru/assets/uploadify/0/7/c/07cdfb4a7f848e1c709063f738c996cds.jpg
и получаем это:
itchief.ru/assets/uploadify/e/3/7/e3701a8018090de63569a82b3552152ds.jpg
Далее закрываем, и кликаем на оружие, которое под ним, допустим там id = 4
и в модальное окно загружается из базы уже другая информация, и получаем это:
itchief.ru/assets/uploadify/3/c/5/3c5e7bfb99b72d2ea5c4a6b78279db64s.jpg
Принцип такой:
1. Используем вышеприведённый скрипт до строки $(«myModal ..., т.е. до вывода модального окна. Эта часть нам нужна чтобы получить id на который нажал пользователь.
2. Далее пишем AJAX скрипт (load.php < — серверный скрипт, который будет обрабатывать Ваш запрос, data < — параметры, success < — при успехе).
3. Вставляем оставшийся скрипт, т.е. открытие модального окна.
Ну и конечно нужно написать обработку на стороне сервера (например, файл load.php).
Сам отдельный js который обрабатывает функцию и отправляет ее в обработчик тоже вроде не изменился
Ну и js окна самый простой там. Без вас я бы не разобрался! Хорошо, что нашел данный ресурс. Впервые вижу, чтобы администратор помогал «смертным» :D
Еще раз спасибо!
Например:
Т.е. data-target указывает цель (диалоговое окно), которое будет открываться при нажатии на кнопку (кнопка1 с data-target="#modal1" — диалоговое окно с id=«modal1», кнопка2 с data-target="#modal2" — диалоговое окно с id=«modal2»).
Подскажите, пожалуйста, а если на одной странице будет много, модальных окон — это ничего?
У меня будет сайт-визитка, на нем станица портфолио. Планирую сделать так: Есть маленькая картинка, при клике на которую в модальном окне открывается большая с описанием, заголовком, и кнопками заказать услугу. Или так не делают, а для этого используют другие инструменты. Буду благодарна, если кто ответит. Ну и насколько я понимаю, совершенно не важно, что будет открывать модальное окно: ссылка, кнопка, изображение?
Использовать много модальных окон, которые будут выполнять одну и ту же задачу – это не очень хорошо. Обычно используют одно модальное окно и JavaScript.
Во втором вопросе вы совершенно правы. Для открывания диалоговых окон Вы можете использовать любой HTML элемент.
Если Вы не знаете JavaScript, то делайте, так как Вы понимаете. Со временем вы всегда сможете переделать, улучшить и доработать свой проект…
Может подсказать в какую сторону копать. Необходимо чтобы в зависимости от нажатой кнопки, в модальное окно имело то или иное содержимое (подгружались разные формы).
Есть несколько кнопок, по нажатию на каждую из них необходимо вызвать в модальном окне свою форму заказа. Плодить в коде под каждую кнопку свое модальное окно не эстетично, хотя проще простого, но хотелось бы узнать более эстетичное решение, если это возможно…
Очень просто это можно сделать так:
1. Создать модальное окно.
2. Поместить в элемент с классом .modal-body столько форм сколько нужно (каждой форме дать идентификатор, например, order1, order2, order3 и т.д.).
Код...
3. Создать кнопки. Каждой кнопке с помощью data-атрибута data-form указать ту форму, которую она будет открывать.
Код...
4. Вставить на страницу JavaScript код, который будет при открытии модального окна, показывать в зависимости от нажатой кнопки связанную с ней форму.
Код...
Кроме этого варианта, сценарий, который вы описали, можно также выполнить другими способами (например, через AJAX).
Огромное вам спасибо за предоставленное решение по моей проблеме!!!
Все отлично работает!!! По больше бы, таких как вы, людей, и мир будет добрее и менее меркантильнее!!!
Второй вопрос напрашивается сам собой, другой способ, например, через AJAX, он будет лучше, чем описанный вами, или просто как вариант?
В целом, на лендинге присутствовать будут три формы заказ, одна заказа обратного звонка и политика конфиденциальности — это что в модальном окне.
Единственное, думаю пока, сделать политику по примеру описанному в уроке «свой контент по своей кнопке, там где data-content=»необходимый текст" или все таки в модалку к формам?!
Вопрос еще такой, читал на разных форумах, одни категорически советуют код модального окна внизу страницы, другие напротив, сразу после Позвольте узнать ваше мнение на этот счет?
Насчёт размещения кода модального окна почитайте документацию. Согласно документации код модального окна необходимо помещать сразу же после открывающего тега body.
Создай свою ситуацию на jsfiddle.net, посмотрим.
У меня данная схема не работала. Ролик останавливался, но через некоторое время опять начинал проигрываться в фоне. С Google API не получилось, сделал так.
Код: