Menu
Community /Pin to ProfileBookmark
@NogDogAug 16.2022 — #Just trying to paste it here from the first pastebin link:
This is the button that opens the modal:
And that is my related JS code:
**Hmm... had to change "onclick" to "on-click". Sure wish the forum owners would fix this. :( **
Hide element after redirect
Hi,
I have login button which opens a modal on click. The modal can be closes in three different ways:
– clicking the close button– clicking outside the modal (on its background container)– pressing the escape key
The modal xhr loads a login or registration form. After submitting the form (POST), the server (Python Flask) sends a redirect to the home page. My problem is that the modal is still open after this redirect which leads to a glitched view.
How can I close the modal after receiving the redirect? I could pass a url parameter but I feel there must be an easier, cleaner solution.
PS: I am very new to JS and also new to webdev in general.
Sign in
to post a comment12 Comments(s) ↴
0
@NogDogAug 16.2022 — #Just trying to paste it here from the first pastebin link:This is the button that opens the modal:
<i>
</i><!-- Had to add hyphen to "on-click" so this would post here -->
<button on-click="showElement('modal')">Login</button>
And that is my related JS code:
<i>
</i>function hideElement(id) {
document.getElementById(id).classList.add("hidden");
}
function showElement(id) {
document.getElementById(id).classList.remove("hidden");
}
// Hide modal when clicking on background
document.getElementById("modal").addEventListener('click', function (event) {
let modalContainer = document.getElementById("modalContainer");
if (!modalContainer.contains(event.target)) {
hideElement('modal');
}
});
// Hide modal with escape key
document.addEventListener('keydown', function (event) {
if (event.key == 'Escape') {
hideElement('modal');
}
});
**Hmm... had to change "onclick" to "on-click". Sure wish the forum owners would fix this. :( **