Добавить класс в тело, когда модальное окно открыто

У меня проблема с модальными окнами входа. Одно модальное окно открывается, когда кто-то щелкает ссылку «забыл пароль» на моем входе в модальном окне. (Одно модальное окно открывается в другом модальном) Итак, я все сделал чисто, добавив все необходимые атрибуты. Например:

  <span data-toggle = "modal" data-target = "#forgot-pin-popup" data-dismiss = "modal">Forgot password?</span>

Но я заметил, что он не добавит класс .modal-open в тело, когда мой второй модальный открыт (без этого класса стили показаны странно). Поэтому я вручную использую этот js-скрипт.

  $('.modal').on('hidden.bs.modal', function () {
  if ($('.modal').hasClass('in')) {
   $('body').addClass('modal-open');
   }    
 });

Отлично работает НО, когда я пытаюсь переключить модели как 6 раз. Это не сработает снова. Не представляю почему. Я не могу показать вам пример, потому что он находится на моем производственном сайте. Кто-нибудь сталкивался с подобной проблемой вроде этой?

Вам не хватает символа в вашем HTML: data-dismiss = "modal" vs data dismiss = "modal"

— 23.03.2018 07:28

Отредактировано. Это не сработает, даже если я использую data-dismiss = "modal"

— 23.03.2018 07:30

javascript html css twitter-bootstrap

23.03.2018 07:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

7 703

Ответы 3

как насчет использования глобальных слушателей событий:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('body').toggleClass('modal-open', $('.modal').hasClass('in'));
});

23.03.2018 07:34

Попробуйте использовать body вместо .modal

$('body').on('hidden.bs.modal', function() {
  if ($('.modal.in').length) {
    $('body').addClass('modal-open');
  }
});

Также убедитесь, что ваше модальное окно не должно быть вложено в класс .modal.

$('body').on('hidden.bs.modal', function() {
  if ($('.modal.in').length) {
    $('body').addClass('modal-open');
  }
});
$(".btn-primary").on("click", function() {
  console.info($("body").attr("class"));
})

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">
<!-- Button trigger modal -->
<button type = "button" class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
  Open modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel">
  <div class = "modal-dialog" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"><span aria-hidden = "true">&times;</span></button>
        <h4 class = "modal-title" id = "myModalLabel">Modal title</h4>
      </div>
      <div class = "modal-body">
        ...
      </div>
      <div class = "modal-footer">
        <button type = "button" class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal1" data-dismiss = "modal">
  Open modal
</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal1 -->
<div class = "modal fade" id = "myModal1" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel">
  <div class = "modal-dialog" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"><span aria-hidden = "true">&times;</span></button>
        <h4 class = "modal-title" id = "myModalLabel">Modal title</h4>
      </div>
      <div class = "modal-body">
        ...
      </div>
      <div class = "modal-footer">
        <button type = "button" class = "btn btn-primary" data-dismiss = "modal">Close</button>
      </div>
    </div>
  </div>
</div>

Работает нормально, но случайно. Это не добавит.

— 23.03.2018 07:41

23.03.2018 07:36

Попробуйте использовать модальный идентификатор

На модальном шоу

  $('#forgot-pin-popup').on("shown.bs.modal", function() {
    $("body").addClass("modal-open");
  });

На модальном скрыть

  $('#forgot-pin-popup').on("hide.bs.modal", function() {
    $("body").addClass("modal-open");
  });

23.03.2018 07:53

Другие вопросы по теме

Авто нажмите кнопку

Angularjs html не использует загрузку

Выровняйте все элементы слева CSS

Как отобразить результаты в виде кнопки изображения в html с помощью javascript?

Показать только div, пользователь выбирает конкретную радиокнопку - Angular 5

DataTables Адаптивные дочерние строки не работают

Почему `padding: auto родительского div` не совпадает с` margin: auto of child div`?

Отправка формы в iframe и перенаправление всей страницы, не касаясь страницы iframe

Как добавить непрозрачность наложения поверх фонового изображения?

Получить ответ на кнопку из всплывающего окна, нажав кнопку JQuery html

Добавить класс в тело, когда модальное окно открыто

Ответы 3

Другие вопросы по теме

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