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 $(‘#myModal’).модальный (‘show’) не работает
Я не уверен, почему, но все ладовые функции не работают со мной. Я проверил версию и загрузку, они в порядке.
Я продолжаю получать это сообщение об ошибке:
Uncaught TypeError: $(. ).modal is not a function
для шкуры я уже нашел альтернативу. вместо:
я использовал этот :
и он отлично работает.
проблема теперь с шоу
Я тоже пробовал оба!—8—>
но, к сожалению, ни один из них не работает.
здесь html-код — при нажатии кнопки я сделаю некоторую проверку и обрабатывать данные json из веб — службы, если это удастся, то я хочу показать мой модальный-все работает, кроме шоу.
если есть какая-либо альтернатива, я хотел бы знать это.
9 ответов
наиболее распространенной причиной таких проблем являются
1.Если вы определили библиотеку jquery несколько раз.
библиотека начальной загрузки применяется к первой библиотеке jquery, но при перезагрузке библиотеки jquery исходная загрузка начальной загрузки теряется (модальная функция находится в начальной загрузке).
2.Пожалуйста, оберните свой код JavaScript внутри
3.Пожалуйста, проверьте, если id модального это же
как тот, который вы определили для компонента (также проверьте дублирование того же идентификатора ).
Я получил ту же проблему при работе с модальным всплывающим загрузчиком , я использовал Id и триггер click event для показа и скрытия модального всплывающего окна вместо $(«#Id»).модальные (‘show’) и $(«#id»).модальный (‘скрыть’), `
моей основной причиной было то, что я забыл добавить # перед именем ID. Неубедительно, но верно.
для вашей справки, кодовая последовательность, которая работает для меня
попробуйте это без paramater
вы уверены, что идентификатор модального является «myModal»? если нет, то вызов не сработает это.
также-просто от чтения Вашего сообщения — вы запускаете функцию / проверку с помощью этой кнопки
и потом, если все хорошо — вы хотите, чтобы вызвать модальное. — если это случай hte-то вы должны удалить переключатель из этой кнопки нажмите. Я предполагаю, что у вас есть обработчик событий, связанный с этим щелчком? вам нужно .модальный («show») как часть этой функции. не переключается с этой кнопки. также — это идентификатор правильные «creatNewAcount» в противоположность этому слово «createNewAccount»
используйте объект для вызова.
или если вы используете ajax, чтобы показать, что модальный после получения результата, это работа для меня.
первый скрипт googleapis не работает сейчас дни используют эту вторую скрипту, данную jquery
jQuery lib должен быть загружен первым. В моем случае я сначала загружал bootstrap lib, также пробовал тег с целью и запускал триггер щелчка. Но главная проблема была — jquery должен быть загружен первым.
использовать .modal(
Источник
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 недель попыток я не могу заставить его работать. Мой модал настроен в таком виде, как этот:
Источник
Модальное окно
Используйте плагин модального окна Bootstrap для JavaScript, чтобы добавить на свой сайт диалоговые окна для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.
Как это работает
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.
- Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , так что вместо этого прокручивается модальное содержимое.
- Клик по модальному «фону» автоматически закрывает модальный.
- Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
- В модальных окнах используется position: fixed , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
- Еще раз, из-за position: fixed есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для получения дополнительной информации.
- Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:
Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.
Примеры
Модальные компоненты
Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.
Источник