zamknięcie modala po kliknięciu poza niego

nie wiem czemu mi to nie działa, męczę się już sporo czasu z tym tu mam kod link a tu stronę link

Nie działa to przez ten warunek

if (e.target.matches === cancelButton || !e.target.closest === favDialog) {
  // ...
}

bo błednie starasz się wywołać te metody.

Przy korzystaniu z funkcji / metod musisz dodać nawiasy (), oraz przekazać argument jeśli jest potrzebny.

Tak wyglądałoby to prawidłowo e.target.matches('xxxx') , ale taki zapis w tym przypadku jest błędny e.target.matches === 'xxxx'.

Do porównania dwóch elementów wybrałbym isEqualNode zamiast matches (https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode)

I po zmianach Twój fragment wyglądałby w taki sposób

window.addEventListener('click', function (e) {
  if (e.target.isEqualNode(cancelButton) || !e.target.closest('#' + favDialog.id))
    favDialog.close();
});

e.target.isEqualNode(cancelButton) -> sprawdza, czy kliknięty element to Twój cancelButton.

!e.target.closest('#' + favDialog.id) -> najpierw pobieramy atrybut ID z elementu favDialog, a później podstawiamy go do metody closest, żeby sprawdzić, czy użytkownik kliknął poza modal.

Dalej nie działa

Trzeba zrobić małą poprawkę, bo dopiero teraz testuje to co napisałem w pierwszym poście i wychodzi na to, że odpalają się 2 eventy pod rząd :D Jeden, który otwiera modal i od razu drugi zamykający.., więc teoretycznie działa, ale nie tak jak powinno :P

Wcześniej o tym nie pomyślałem, ale ten modal zajmuje 100% wysokości i 100% szerokości ekranu, więc nie da się w żaden sposób kliknąć poza modalem. Trzeba dodać dodatkowy element w środku modala, który owija całą treść, którą chcesz tam dodać i zrobić tak, żeby kliknięcie poza treść, czyli nasz element <div class="favDialog__contnet"> zamykało modal.

<button class="modal__opener" id="updateDetails">Modal</button>

<dialog id="favDialog">
  <div class="favDialog__content">
      // tutaj zawartość modala
      
     <p>Przykładowy akapit</p>
     <button>Przykładowy button</button>
  </div>
</dialog>

<script>
    (function() {
        const updateButton = document.getElementById('updateDetails'); // Pobieramy przycisk do otwierania 
        const favDialog = document.getElementById('favDialog'); // Pobieramy modal
        const cancelButton = document.getElementById('cancel'); // Pobieramy przycisk do zamykania

        // Ustawiamy, aby kliknięcie w "updateButton" otwierało modal
        updateButton.addEventListener('click', function (e) {
            favDialog.showModal();
        });

        // Tutaj zaszła zmiana, bo zamiast przypinać event do obiektu window, jest favDialog
        // bo nie można kliknąć poza modalem jeśli jest rozciągnięty na cały ekran (width: 100% / height: 100%, ewentualnie jakieś position: fixed) 
        // i tamten warunek był trochę bez sensu xD
        //
        // favDialog.open --> sprawdzamy, czy modal jest otwarty
        // jeśli jest i któryś z poniższych warunków okaże się prawdą
        // to otwieramy modal
        //
        // e.target.isEqualNode(cancelButton) --> przycisk do anulowania
        //
        // !e.target.closest('.favDialog__content') --> elementy poza <div class="favDialog__content">
        favDialog.addEventListener('click', function(e) {
            if (favDialog.open && (e.target.isEqualNode(cancelButton) || !e.target.closest('.favDialog__content'))) {
                favDialog.close();
            }
        });

        if (window.dialogPolyfill) {
            dialogPolyfill.registerDialog(favDialog);
        }
    })();
</script>

Xarviel napisał(a):

Trzeba zrobić małą poprawkę, bo dopiero teraz testuje to co napisałem w pierwszym poście i wychodzi na to, że odpalają się 2 eventy pod rząd :D Jeden, który otwiera modal i od razu drugi zamykający.., więc teoretycznie działa, ale nie tak jak powinno :P

Wcześniej o tym nie pomyślałem, ale ten modal zajmuje 100% wysokości i 100% szerokości ekranu, więc nie da się w żaden sposób kliknąć poza modalem. Trzeba dodać dodatkowy element w środku modala, który owija całą treść, którą chcesz tam dodać i zrobić tak, żeby kliknięcie poza treść, czyli nasz element <div class="favDialog__contnet"> zamykało modal.

<button class="modal__opener" id="updateDetails">Modal</button>

<dialog id="favDialog">
  <div class="favDialog__content">
      // tutaj zawartość modala
      
     <p>Przykładowy akapit</p>
     <button>Przykładowy button</button>
  </div>
</dialog>

<script>
    (function() {
        const updateButton = document.getElementById('updateDetails'); // Pobieramy przycisk do otwierania 
        const favDialog = document.getElementById('favDialog'); // Pobieramy modal
        const cancelButton = document.getElementById('cancel'); // Pobieramy przycisk do zamykania

        // Ustawiamy, aby kliknięcie w "updateButton" otwierało modal
        updateButton.addEventListener('click', function (e) {
            favDialog.showModal();
        });

        // Tutaj zaszła zmiana, bo zamiast przypinać event do obiektu window, jest favDialog
        // bo nie można kliknąć poza modalem jeśli jest rozciągnięty na cały ekran (width: 100% / height: 100%, ewentualnie jakieś position: fixed) 
        // i tamten warunek był trochę bez sensu xD
        //
        // favDialog.open --> sprawdzamy, czy modal jest otwarty
        // jeśli jest i któryś z poniższych warunków okaże się prawdą
        // to otwieramy modal
        //
        // e.target.isEqualNode(cancelButton) --> przycisk do anulowania
        //
        // !e.target.closest('.favDialog__content') --> elementy poza <div class="favDialog__content">
        favDialog.addEventListener('click', function(e) {
            if (favDialog.open && (e.target.isEqualNode(cancelButton) || !e.target.closest('.favDialog__content'))) {
                favDialog.close();
            }
        });

        if (window.dialogPolyfill) {
            dialogPolyfill.registerDialog(favDialog);
        }
    })();
</script>

tylko że powinienem zrobić by modal włączał się po kliknięciu na przycisk i po kliknięciu gdziekolwiek

mistrzkrisu6 napisał(a):

tylko że powinienem zrobić by modal włączał się po kliknięciu na przycisk i po kliknięciu gdziekolwiek

No to musisz jedynie uprościć warunek zamykania

if (favDialog.open) {
  favDialog.close();
}