Modal hide не работает

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 modal hide is not working

Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.

I had the same problem, tried a lot of things but the only solution that worked for me is @Tang Chanrith suggested to remove individually parts of the modal but a little bit improved to place back and the scrollbar. I’ll put my answer just if the accepted answer did not work for them. Sorry for my english. Hope I helped.

Improved Sollution

You just have to delete a class from body and css that generated

I had same problem. Remove fade class.

For those still having issues (hi Googlers!), if you’re using fade, you’ll have to use javascript to remove fade class.

Try this function

Remove the modal class «fade» will do.

try to add return false like this:

I have solution this problem.

I checked your code. Now you compare a == 5. but a is always 4. you may have to check this why you are doing this comparison. Also you need you remove the data-target if you want to open modal from javascript :

data-target directly opening the modal. Check if this is working.

You should try this $(‘.modal.in’).modal(‘hide’)

I had the same problem, my mistake was that I was trying to open the modal window a few times. We must test that the modal window is not already open before trying to open it.

Hide modal dialog box using bootstrap

Method 1: using bootstrap

Method 2: using stop-propagation

Method 3: After shown method invoke

Method 4: Using CSS

In the java script code you need to add one line of code

As I encountered, sometimes you need to remove display style:

I had the same issue. I tried the JavaScript way suggested in the post, unfortunately it only worked half of the time. If I triggered my modal a few times, it bugs out. As a result I created a work around using CSS:

I was opening the modal popup when I click on the link using data-toggle=»modal» attribute which was bound with that link and trying to close it using javascript but I was failed each time, so when I remove the «data-toggle» attribute and «href» from that link and opened it using javascript then it was closing properly using javascript as well.

from the below few lines of code, you can understand easily

I changed the above link to something link this

After that when I try to close it using javascript, then I become successful

Источник

Закрыть Bootstrap Modal

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

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

ОТВЕТЫ

Ответ 1

Поместите modal(‘toggle’) вместо modal(toggle)

Ответ 2

чтобы закрыть bootstrap modal, вы можете передать ‘hide’ как вариант модального метода, как следует

Пожалуйста, взгляните на рабочую скрипку здесь

bootstrap также предоставляет события, которые вы можете подключить к функциям modal, например, если вы хотите запустить событие, когда модальность закончила скрываться от пользователя, которого вы может использовать событие hidden.bs.modal, которое вы можете прочитать больше о модальных методах и событиях здесь в Документация

Если ни один из вышеперечисленных методов не работает, введите идентификатор вашей кнопки закрытия и нажмите кнопку «Закрыть».

Ответ 3

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

Ответ 4

это сработало для меня:

используйте эту ссылку модальный закрыть

Ответ 5

Запуск этого вызова через класс ($(«.my-modal»)) не будет работать.

Ответ 6

этот файл довольно хорош, и он также работает в angular 2

Ответ 7

Мои пять центов в этом случае — это то, что я не хочу, чтобы нужно было нацеливать bootstrap modal на id и видеть, что должен быть только один модальный за один раз следующее должно быть достаточно, чтобы удалить модальный как переключатель может быть опасным:

Ответ 8

В некоторых случаях ошибкой ввода может быть преступник. Например, убедитесь, что у вас есть:

Обратите внимание на двойной «ss» во втором примере, который приведет к сбою кнопки «Закрыть».

Ответ 9

Попробуй это

Ответ 10

Ответ 11

Мы можем закрыть модальное всплывающее окно следующими способами:

Ответ 12

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

Ответ 13

Ответ 14

ты можешь использовать;

Ответ 15

Использование modal.hide только скроет модальный. Если вы используете оверлей под модальным, он все равно будет там. используйте щелчок, чтобы фактически закрыть модальный и удалить наложение.

Ответ 16

Другой способ сделать это — сначала удалить класс modal-open, который закрывает модальный. Затем вы удаляете класс модальный фон, который удаляет сероватую обложку модального.

Можно использовать следующий код:

Ответ 17

Я закрыл модально программно с помощью этого трюка

Добавьте кнопку в модал с data-dismiss=»modal» и скройте кнопку с display: none . Вот как это будет выглядеть

Теперь, когда вы хотите закрыть модально программно, просто вызовите событие нажатия на эту кнопку, которое не видно пользователю

В Javascript вы можете вызвать нажатие на эту кнопку следующим образом:

Ответ 18

Этот код отлично работал для меня, чтобы закрыть модальный (я использую bootstrap 3.3)

Ответ 19

В моем случае главная страница, с которой был запущен мод начальной загрузки, перестала отвечать после использования $(«#modal»).modal(‘toggle’); Кстати, но начал отвечать следующим образом:

Ответ 20

Это хорошо работает

Тем не менее, когда у вас есть несколько модов, накладывающихся друг на друга, это не эффективно, поэтому вместо этого это работает

Ответ 21

Кроме того, вы можете «click» на «x», который закрывает диалог. Например:.

Ответ 22

В моем случае я использовал кнопку, чтобы показать модальный

Таким образом, в моем коде, чтобы закрыть модальный (который имеет ), я вызываю эту функцию (в машинописном наборе Angular):

Если я вызываю $ (modalId).modal(‘hide’), это не работает, и я не знаю, почему

PS: в моём модале я тоже кодировал этот элемент кнопки с классом .close

Ответ 23

В некоторых случаях решение не работает, поэтому вам нужно правильно удалить класс in и добавить отображение css: нет вручную.

Источник

Bootstrap modal hide не работает

Bootstrap modal hide не работает. Тревога приходит в другом месте. но мой модал не скрыт добавленным bootply. Моя проблема та же самая.

20 ответов

Я показываю простой загрузочный модал с кнопкой ‘checkout’ внизу. При нажатии на кнопку Я хочу: Закройте модал, например $(‘#myModal’). modal(‘hide’) Подождите, пока анимация не будет закончена Измените window.location.href на мою ‘checkout’ страницу. Кажется, я не могу найти способ сцепления без.

Я хочу закрыть коробку bootstrap modal условно. Если я использую $(‘#modal’).modal(‘hide’); это, что-то пойдет не так с моим кодом. И если я использую data-dismiss=modal в шаблоне HTML, модальное действие увольнения выполняется до того, как моя фактическая функциональность должна быть выполнена.

Вы используете оба метода модального переключения: через Javascript и через атрибуты данных. Таким образом, ваш щелчок запускает модальное шоу в качестве набора атрибутов данных, и ваш Javascript не влияет на этот триггер.

Просто удалите атрибуты данных и перейдите к методу Javascript:

У меня была та же проблема, я перепробовал много вещей, но единственное решение, которое сработало для меня, — это @Tang Чанрит предложил удалить отдельные части модального, но немного улучшил, чтобы поместить обратно и полосу прокрутки. Я поставлю свой ответ только в том случае, если принятый ответ не сработал для них. Извините за мой английский. Надеюсь, я помог.

Попробуйте эту функцию

Улучшенное растворение

Вам просто нужно удалить класс из тела и css, который сгенерировал

Попробуйте эту функцию

Для тех, у кого все еще есть проблемы (привет гуглерам!), если вы используете fade, вам придется использовать javascript для удаления класса fade.

У меня была та же проблема. Удалить класс fade .

У меня есть решение этой проблемы.

Я проверил ваш код. Теперь вы сравниваете a == 5. но a всегда равно 4. возможно, вам придется проверить, почему вы делаете это сравнение. Также вам нужно удалить цель данных, если вы хотите открыть модальный из javascript :

данные-цель, непосредственно открывающая модальный. Проверьте, работает ли это.

Я знаю, что этот вопрос уже задавался сотни раз, и я прошел через них, но они не могли исправить мое дело : Это мой код до сих пор

попробуйте добавить return false, как это:

Вы должны попробовать это $(‘.modal.in’).modal(‘hide’)

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

Скрыть модальное диалоговое окно с помощью bootstrap

Метод 1: Использование bootstrap

Метод 2: Использование stop-propagation

Метод 3: после показанного вызова метода

Метод 4: Использование CSS

В коде скрипта java вам нужно добавить одну строку кода

Как я уже сталкивался, иногда вам нужно удалить стиль отображения:

У меня была та же проблема. Я попробовал способ JavaScript, предложенный в посте, к сожалению, он работал только в половине случаев. Если я активирую свой модал несколько раз, он выходит из строя. В результате я создал обходной путь, используя CSS:

У меня тоже есть такая же проблема, и я не могу найти для нее правильного решения.

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

Три основных свойства,

• Класс modal-open удаляется из тега .
• В тег меняется на CSS .

Итак, когда вы делаете эти вещи вручную, вы достигнете этого, когда не работает.

Код должен быть следующим в Jquery,

Следовательно, попробуйте это и получите решение.

Я открывал модальное всплывающее окно, когда нажимал на ссылку с помощью атрибута data-toggle=»modal», который был связан с этой ссылкой, и пытался закрыть ее с помощью javascript, но каждый раз мне это не удавалось, поэтому, когда я удалял атрибут «data-toggle» и «href» из этой ссылки и открывал ее с помощью javascript, она также закрывалась правильно с помощью javascript.

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

Я изменил приведенную выше ссылку на что-то, связывающее это

После этого, когда я пытаюсь закрыть его с помощью javascript, я добиваюсь успеха

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

Теперь, если я хочу открыть модал, я вызываю вышеупомянутую функцию и после этого открываю новую. Подобный этому:

Надеюсь, это вам поможет.

Одним из возможных резонансов должен быть порядок jquery и bootstrap, и ваш скрипт не находится в правильной последовательности. Ниже должна быть последовательность.

Ни одно из вышеперечисленных решений не сработало для меня. Если это ваш случай, попробуйте имитировать событие click на кнопке close (та, которая добавляется динамически):

$(‘.close-modal’).click() должен решить эту проблему.

Проверьте, закрыли ли вы все вложенные div внутри основного модального div

Похожие вопросы:

Как вы можете очистить bootstrap modal на dismiss/hide/close? У меня есть следующее модальное определение: Add.

Я использую Bootstrap modal в приложении react . У меня есть требование, чтобы модальное окно не закрывалось при нажатии на модальный фон . Для этого я использую $(.modal).modal(backdrop:static);.

Я пытаюсь использовать Bootstrap modal. Я импортировал bootstrap-modal.js Мне нужно вызвать модальный атрибут с помощью кнопки, а не JS. Вот мой код, который не позволяет модальному работать .

Я показываю простой загрузочный модал с кнопкой ‘checkout’ внизу. При нажатии на кнопку Я хочу: Закройте модал, например $(‘#myModal’). modal(‘hide’) Подождите, пока анимация не будет закончена.

Я хочу закрыть коробку bootstrap modal условно. Если я использую $(‘#modal’).modal(‘hide’); это, что-то пойдет не так с моим кодом. И если я использую data-dismiss=modal в шаблоне HTML, модальное.

Я знаю, что этот вопрос уже задавался сотни раз, и я прошел через них, но они не могли исправить мое дело : Это мой код до сих пор

Bootstrap Checbox Modal Не Работает

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

У меня есть модальный диалог, сделанный с помощью bootstrap, например:

Я создаю действительно простой, но немного подправленный модал для показа iFrame. Я открываю модель с помощью функции javascript и функции модального вызова, предоставляемой bootstrap. В моем модале.

Я пытаюсь скрыть загрузочный модал в rails 6 через вызов jquery, но после 2 недель попыток я не могу заставить его работать. Мой модал настроен в таком виде, как этот:

Источник