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

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

Модальное окно bootstarp: подключение и настройка, вставка различных элементов. Что делать если не работает модельное окно bootstarp. Я приведу несколько простых примеров и расскажу о модальном окне в целом.

Что нужно сделать, что бы настроить на своем сайте модальное окно bootstarp ? Настроим модальное окно на примере обычного html файла. Если вам необходимо настроить модальное окно на CMS, задавайте вопросы в комментариях.

Все рабочие примеры, приведенные в данной статье можно скачать архивом в конце статьи.

Подключение скриптов и стилей фреймворка bootstarp

Открываем редактор кода, я пользуюсь редактором notepad ++. Делаем заготовку html страницы с помощью тегов.

После чего подключаем два файла стилей css и два файла скриптов JS, получаем файл вида:

По желанию файлы можно скачать и подключить локально.

Довольно часто модальные окна bootstrap не работают по причине не достаточного количества подключенных скриптов и стилей, или их не правильного подключения.

Как видите, в нашем примере используется bootstrap версии 4.

Вызов модального окна bootstrap

Для создания модального окна вставим между тегами

Источник

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() и .modal() вместо (‘show’) и (‘hide’) . кажется, это зависит от комбинации версий bootstrap/jquery. Надеюсь, это поможет.

Источник

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 ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Источник

Bootstrap modal не работает на айфонах, но на всех остальных устройствах всё отлично. В чём причина и как исправить?

Использовал bootstrap modal для того, чтобы при нажатии на заявку открывалась полная информация. Но выявилась проблема. На всех устройствах, кроме айфона, всё работает хорошо:

Но с айфона всё ужасно. Модальное окно открывается и всё. Нет возможности ни с чем взаимодействовать и ещё появляется серая пелена:

В чем причина и как исправить?

Вот код модального окна:

• Вопрос задан 20 сент.
• 175 просмотров

ИМХО, но компоненты бутстрапа — отстой, как только тебе надо с ними как-то взаимодействовать через код.

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

Что касаемо модалки то в стилях каша из z-index свойств. Ищи где они больше чем у модалки и уменьшай. И модалку располагай где-то перед закрывающим тегом

Источник