Second Modal not closing
i have two modals in my website when i click on close button of first one it closes but when i click on close button of second button it does not close i have double check the id's and also check througn console.log which is also working on clicking my cloes icon on second modal check repo code"https://github.com/TalhaMustafa1/bootstrap-website.git" but can not find error here is my js code" <script>
// Get references to the modals by their unique IDs
var modal1 = document.getElementById("myModal");
var modal2 = document.getElementById("Modal");
// Get the buttons that open the modals
var btn1 = document.getElementById("myBtn");
var btn2 = document.getElementById("descento-modal");
// Get the <span> elements that close the modals
var span1 = document.getElementById("closeModal1");
var span2New = document.getElementById("closeModal2New"); // Change the ID here
// Function to open the first modal
btn1.onclick = function () {
modal1.style.display = "block";
};
// Function to close the first modal
span1.onclick = function () {
modal1.style.display = "none";
};
// Function to open the second modal
btn2.onclick = function () {
modal2.style.display = "block";
};
// Function to close the second modal when "closeModal2New" is clicked
span2New.onclick = function () {
modal2.style.display = "none";
};
// When the user clicks anywhere outside of the modals, close them
window.onclick = function (event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
};
</script>
7 Replies
share a live version of your code please, it's much easier to diagnose
also the codeblocks in discord use backticks, left of the 1 button on a qwerty keyboard, not double quotes
```js will turn a block into a syntax highlighted version
on clicking on highlighted part my second modal will open
The click event is bubbling and retriggering the click on the
#descento-modal parent which sets it back to block
move the modal outside of the parent, and it'll work
also, you probably really should be using dialog for modals, but then I think this is a bootstrap project and you're probably stuck using their modal systemyes it is a bootstrap project but for my this modal i am using html,css and javascript
there's an HTML element for dialogs now, modal or otherwise:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://www.youtube.com/watch?v=TAB_v6yBXIE
thanks .Now it is working