Блог

Главная - Вопросы по программированию - Модальный загрузчик не появится

Модальный загрузчик не появится

#javascript #html #twitter-bootstrap #bootstrap-modal

Вопрос:

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

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

Вот мой код:

 lt;script src="//code.jquery.com/jquery-1.11.0.min.js"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"gt; lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"gt;lt;/scriptgt;  lt;input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" "gt;  lt;!-- Modal --gt; lt;div class="modal fade " id="employeedropdownscan " tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true "gt;  lt;div class="modal-dialog modal-dialog-centered " role="document "gt;  lt;div class="modal-content "gt;  lt;div class="modal-header "gt;  lt;h5 class="modal-title " id="exampleModalLongTitle "gt;Modal titlelt;/h5gt;  lt;button type="button " class="close " data-dismiss="modal " aria-label="Close "gt;  lt;span aria-hidden="true "gt;amp;times;lt;/spangt;  lt;/buttongt;  lt;/divgt;  lt;div class="modal-body "gt;  ...  lt;/divgt;  lt;div class="modal-footer "gt;  lt;button type="button " class="btn btn-secondary " data-dismiss="modal "gt;Closelt;/buttongt;  lt;button type="button " class="btn btn-primary "gt;Save changeslt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;

Комментарии:

1. Есть ли у вас какие-либо ошибки в консоли?

2. @AndrewSavetchuk нет, в консоли ничего не отображается, я понятия не имею, в чем может быть проблема

3. Можете ли вы попробовать использовать lt;тип кнопки=»кнопка» переключение данных=»модальные» данные-цель=»#employeedropdownscan»gt;Нажмите здесьlt;тип кнопки=»кнопка» переключение данных=»модальные» данные-цель=»#employeedropdownscan»gt;lt;/кнопкаgt; на всякий случай

4. @AndrewSavetchuk Я пробовал это, я просто попробовал еще раз, но все равно ничего. Я также пытался использовать функцию onclick, чтобы попытаться показать модальное использование $('#employeedropdownscan').modal('show') , но все равно не повезло

5. Вы используете CSS из начальной загрузки 4.0.0 и JS из начальной загрузки 3.7.7. Это не должно работать

Ответ №1:

  1. Вы используете CSS из начальной загрузки 4.0.0 и JS из начальной загрузки 3.7.7. Это не должно работать. Давайте использовать 3.4.1 🙂
  2. id Атрибут вашего модального имеет одно дополнительное место в конце. Давайте удалим его.
  3. И у нас есть такое же дополнительное пространство в конце data-dismiss атрибутов. Он блокирует кнопки закрытия. Давай и это исправим.
 lt;script src="https://code.jquery.com/jquery-1.11.0.min.js"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"gt; lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"gt;lt;/scriptgt;  lt;input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" "gt;  lt;!-- Modal --gt; lt;div class="modal fade " id="employeedropdownscan" tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true "gt;  lt;div class="modal-dialog" role="document"gt;  lt;div class="modal-content "gt;  lt;div class="modal-header "gt;  lt;h5 class="modal-title " id="exampleModalLongTitle "gt;Modal titlelt;/h5gt;  lt;button type="button " class="close " data-dismiss="modal" aria-label="Close "gt;  lt;span aria-hidden="true "gt;amp;times;lt;/spangt;  lt;/buttongt;  lt;/divgt;  lt;div class="modal-body "gt;  ...  lt;/divgt;  lt;div class="modal-footer "gt;  lt;button type="button " class="btn btn-secondary " data-dismiss="modal"gt;Closelt;/buttongt;  lt;button type="button " class="btn btn-primary "gt;Save changeslt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;

Ответ №2:

Во-первых, используйте этот импорт, чтобы заставить его работать.

Версии начальной загрузки CSS и JavaScript должны совпадать.

 lt;script src="//code.jquery.com/jquery-1.11.0.min.js"gt;lt;/scriptgt;  lt;!-- Compiled and minified CSS --gt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous"gt;  lt;!-- Optional theme --gt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"gt;  lt;!-- Compiled and minified JavaScript --gt; lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"gt;lt;/scriptgt;

Во-вторых, не ставьте пробелы в конце атрибутов.

Кроме импорта, я смог найти еще две проблемы в вашем коде из-за чрезмерного количества пробелов в атрибутах HTML.

  1. Загрузчик не может найти целевой модальный элемент
  2. Когда модальный режим открыт, кнопка «Закрыть» не работает

Причина:

  1. id="employeedropdownscan "
  2. data-dismiss="modal "

Как исправить:

  1. id="employeedropdownscan"
  2. data-dismiss="modal"

Полный код / Рабочий фрагмент

 lt;script src="//code.jquery.com/jquery-1.11.0.min.js"gt;lt;/scriptgt;  lt;!-- Compiled and minified CSS --gt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous"gt;  lt;!-- Optional theme --gt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"gt;  lt;!-- Compiled and minified JavaScript --gt; lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"gt;lt;/scriptgt;  lt;input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here"gt;  lt;!-- Modal --gt; lt;div class="modal fade" id="employeedropdownscan" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true "gt;  lt;div class="modal-dialog modal-dialog-centered" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h5 class="modal-title" id="exampleModalLongTitle"gt;  Modal title  lt;/h5gt;  lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;  lt;span aria-hidden="true"gt;amp;times;lt;/spangt;  lt;/buttongt;  lt;/divgt;  lt;div class="modal-body"gt;  ...  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;Closelt;/buttongt;  lt;button type="button" class="btn btn-primary"gt;Save changeslt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;
Метки: