Меню

Data dismiss modal не работает

doesn’t work #17956

Comments

phpcoder commented Oct 17, 2015

When a new modal is opened by a trigger element within the already opened modal (and close the opened one), new and all subsequent modals loose the ability to scroll, instead a background is being scrolled.
It is similar to the earlier discussed issue #7501
Such behaviour is noticed in bootstrap 3.5.5 but exists since 3.0.0. Browsers tested were Crome (37.0.2062.124) and Safari (6.2.8) in os x 10.8.

To reproduce the issue a handy example was found at http://jsbin.com/venek/1/edit
Screen size should be adjusted so that the opened modal goes behind its bottom edge.
The used in the example bootstrap version 3.2.0 works fine, but changing in the code bootstrap cs and js to anything above 3.0.0 produces the described behaviour.

Last note: when a modal is opened, normally a BODY element is given a class «modal-open».
However, in versions > 3.0.0 the second and all subsequent modals opened within the first one the BODY element looses the «modal-open» class. That is the reason for the issue.

The text was updated successfully, but these errors were encountered:

twbs-lmvtfy commented Oct 17, 2015

You appear to have posted a live example (http://jsbin.com/venek/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 52, column 63 thru column 64: Bad character `after` .

You’ll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

cvrebert commented Oct 17, 2015

happy2deepak commented Oct 30, 2015

So, does anyone has a working solution to it? other than adding «modal-open» class using jquery?

mdo commented Nov 2, 2015

We explicitly don’t allow stacked modals, so should we close this as a won’t fix?

cvrebert commented Nov 2, 2015

Probably should at least document that it doesn’t work, since it seems like it (c|sh)ould in the abstract.

happy2deepak commented Nov 2, 2015

@cvrebert yeah, at least that should be done.

cvrebert commented Dec 14, 2015

We explicitly don’t allow stacked modals

Technically this isn’t stacking modals. It’s closing one modal and then immediately opening another. There’s only one modal in play at a time.

jack-fdrv commented Dec 14, 2015

I fix it with not so small code. But it works.

I know it could be better optimized.

starr0stealer commented Aug 9, 2016

I created a branch with the change-set above that handles this special use-case. I tried to make the changes to the JS as minimal as possible.

https://jsfiddle.net/oqxbuhct/ — In this Fiddle you can see the issue with BS 3.3.7
https://jsfiddle.net/ac45zk6z/ — In this Fiddle you can see the issue fixed by my changes

In short this is the approach I took to fix the issue, (modal-open is removed, and secondly padding-right needs to be managed when swapping modals).

  • The click.dismiss.bs.modal handler is updated to check if the ‘closer’ is also opening another modal, if so set a flag, and early reset page padding right.
  • The hideModal function is updated to check for the modalSwap flag, if false continue as normal, otherwise do not remove modal-open or reset padding and clear the flag.
Читайте также:  Как не работаем 23 февраля 2021

I introduce the $.fn.modal.modalSwap flag because when the body has any padding right values, opening and closing modals results in the padding to continually grow, which is a result of not resetting the padding when opt-ing out of removing the modal-open class. You need to stop resetting the padding during this set all the call-stack executes the hiding handler after the new show handler is executed, if reset padding is left in it will remove the newly added rule resulting in content shifting.

Let me know what you think about this approach, such as if you thinks its a good idea or if you think I may introduced further bugs. As well as if you think it could be handled in a better way.

twbs-lmvtfy commented Aug 9, 2016

You appear to have posted a live example (https://fiddle.jshell.net/oqxbuhct/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 470, column 5: E013: Only columns ( .col-*-* ) may be children of .row s
  • line 484, column 1: E048: .modal must have a role=»dialog» attribute.
  • line 500, column 1: E048: .modal must have a role=»dialog» attribute.
  • line 485, column 3: E049: .modal-dialog must have a role=»document» attribute.
  • line 501, column 3: E049: .modal-dialog must have a role=»document» attribute.

You’ll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

twbs-lmvtfy commented Aug 9, 2016

You appear to have posted a live example (https://fiddle.jshell.net/ac45zk6z/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 485, column 5: E013: Only columns ( .col-*-* ) may be children of .row s
  • line 499, column 1: E048: .modal must have a role=»dialog» attribute.
  • line 515, column 1: E048: .modal must have a role=»dialog» attribute.
  • line 500, column 3: E049: .modal-dialog must have a role=»document» attribute.
  • line 516, column 3: E049: .modal-dialog must have a role=»document» attribute.

You’ll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

mdo commented Sep 5, 2016

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a «won’t fix.» For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

StefanoBiancardo commented Nov 11, 2016

I fix with this code (edit bootstrap.js)

This work for me

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Bootstrap 4 .modal (‘hide’) не работает

Я создаю действительно простой, но немного подправленный модал для показа iFrame. Я открываю модель с помощью функции javascript и функции модального вызова, предоставляемой загрузчиком. В моем модале я поместил значок для закрытия модального. Если я нажму на эту иконку закрытия, модал не скроется. Я использую javascript onclick с функциями .modal(‘show’) и .modal(‘hide’) , предоставляемыми загрузчиком. Модал не скрывается, но мой консольный журнал запущен.

Читайте также:  Как правильно настроить аргон под нержавейку

Я знаю, что есть много вопросов с похожей проблемой, но эти вопросы не содержат ответа, который я искал. Я знаю, что CSS в HTML просто не подходит, но я делал быстрое создание прототипов, поэтому, пожалуйста, прости меня за это.

Открыть ссылку для модальных

Моя главная проблема в том, что мой модал появляется, также запускает console.log как для показа, так и для скрытия, но после нажатия на кнопку закрытия модал не скрывается.

3 ответа

Похоже, вам нужен div modal-dialog внутри вашего модала, чтобы .modal(‘hide’) или data-dismiss=»modal» работали.

Я решил вашу проблему, изменив класс body-modal на modal-dialog . ( изменил значок закрытия на красный, чтобы его было легче увидеть во фрагменте )

Но сейчас модал немного грязный (визуально).

Я бы рекомендовал вам проверить модальные документы. Благодаря включенным функциям Bootstrap 4 вы, вероятно, удалите большую часть своих дополнительных (встроенных) CSS и JS и таким образом убедитесь, что все работает хорошо в большинстве браузеров.

Если вы удалите класс fade , он будет работать нормально.

Я думаю, что вам нужен div modal-dialog , если вы собираетесь использовать класс fade . Кроме того, используйте только один тип закрывающих / открывающих модалов, либо путь js, либо data-toggle/data-dismiss .

Вы можете использовать data-dismiss = «modal» для закрытия модального

Источник

Модальное окно

Используйте плагин модального окна Bootstrap для JavaScript, чтобы добавить на свой сайт диалоговые окна для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это работает

Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.

  • Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , так что вместо этого прокручивается модальное содержимое.
  • Клик по модальному «фону» автоматически закрывает модальный.
  • Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
  • В модальных окнах используется position: fixed , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
  • Еще раз, из-за position: fixed есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для получения дополнительной информации.
  • Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:

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

Примеры

Модальные компоненты

Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Источник

Компоненты

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

Модальное окно

Модальные окна Имеют обтекаемую форму, но гибкая, диалоговое окно с минимальным набором функций и по умолчанию.

Читайте также:  Вызов планшет мастера настроить

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

Всегда старайтесь поместить разметку модального окна в верхнем уровне HTML-документа, чтобы избежать влияния других элементов на внешний вид модального окна и/или его функциональность.

Предостережения для мобильных устройств

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Modal title

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

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

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Сделать модальности можно

Не забудьте добавить role=»dialog» и aria-labelledby=». » , ссылаясь на модальное окно Заголовок, чтобы .modal , и role=»document» к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal .

Встраивание видео YouTube

Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog . Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.

Источник

Adblock
detector