Добавить слушателя к bootstrap модальному закрытию, используя ТОЛЬКО Javascript - PullRequest
Новая
       72

Добавить слушателя к bootstrap модальному закрытию, используя ТОЛЬКО Javascript

1 голос
/ 28 мая 2020

Я хочу запускать событие каждый раз, когда модальное окно закрывается. Поскольку его можно закрыть из нескольких мест, я просто хочу добавить слушателя, когда он закрывает . Я просмотрел inte rnet в поисках возможных решений для прослушивания модального события закрытия bootstrap, но все они используют JQuery. Есть ли способ сделать это, используя простой javascript?

Вот решение в JQuery: 

<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    $("#myModal").modal("show");
  });
  $("#myModal").on('hidden.bs.modal', function(){
    alert('The modal is now hidden.');
  });
});
</script>

Если бы я мог добавить слушателя в hidden.bs.modal, используя Только javascript это было бы здорово. Я пробовал 

document.addEventListener("hidden.bs.modal", function(){
  console.log('modal closed!')
});

, но он не работает.

1 Ответ

0 голосов
/ 28 мая 2020

hidden.bs.modal не является событием, поэтому нет возможности прослушивать его напрямую с помощью addEventListener.

Что вы можете сделать, так это прослушивать изменения атрибутов определенного элемента c, используя наблюдатель мутации .

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

const target = document.getElementById('target');
document.getElementById('btn1').addEventListener('click', e => target.classList.add('hidden', 'bs', 'modal'));

document.getElementById('btn2').addEventListener('click', e => target.classList.remove('hidden', 'bs', 'modal'));

const config = { attributes: true, childList: false, subtree: false };

function callback(mutationsList, observer)
{
  for(let mutation of mutationsList)
  {
    if(mutation.attributeName == 'class')
    {
      let cls = mutation.target.getAttribute('class');
      if(cls.includes('hidden') && cls.includes('bs') && cls.includes('modal'))
      {
        console.log('the modal is now hidden');
      }
    }
  }
}

const observer = new MutationObserver(callback);

observer.observe(target, config);
.hidden
{
 color:green;
}
.bs
{
 background: red;
}
.modal
{
 border:black dashed 3px;
}
<p id="target">hello</p>
<p><input type="button" id="btn1" value="switch on"></p>
<p><input type="button" id="btn2" value="switch off"></p>
...