- Rejestracja:około 8 lat
- Ostatnio:11 miesięcy
- Postów:202
JavaScript 
- Rejestracja:ponad 3 lata
- Ostatnio:około 5 godzin
- Postów:847
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.
- Rejestracja:około 8 lat
- Ostatnio:11 miesięcy
- Postów:202
Dalej nie działa
- Rejestracja:ponad 3 lata
- Ostatnio:około 5 godzin
- Postów:847
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>
- Rejestracja:około 8 lat
- Ostatnio:11 miesięcy
- Postów:202
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
- Rejestracja:ponad 3 lata
- Ostatnio:około 5 godzin
- Postów:847
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();
}