Personal project issue-modal popup not closing

JavaScript
1

I need help with altering my code to make my modal popup function properly.
Issue: I can only open my modal popup and cannot close it, once it’s open it’s stuck on the open screen

My code: Here is a screenshot off it , it can open but not close
hehehe

And here is the related code like the dialog element etc.etc.

HTML

<!-- Modal Structure -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
    <button id="fullScreenBtn">Full Screen</button>
  </div>
</div>

<button id="addPageButton">Add</button>


<button id="addPageButton">Add</button>
<div class="modal-content">
<button id="OpenBtn">Open</button>
<button id="closeBtn">Close</button>
<h2>Customize your page</h2>
<div class="modal-body">
  <textarea placeholder="Enter your notes here..."></textarea>
</div>
</div>
</dialog>

CSS

 .modal-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
            max-width: 1000px; /* Max width for larger screens */
          
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border-radius: 8px;
            margin: auto;
        }

        /* Full Screen Resize */
      .full-screen {
            width: 100% !important;
            height: 100% !important;
            top: 0 !important;
            left: 0 !important;

        
        order-radius: 0 !important;
        }

}
</style>

JAVASCRIPT

<script>
 // Get the elements
 const openBtn = document.getElementById("addPageButton");
        const modal = document.getElementById("myModal");
        const closeBtn = document.getElementById("closeBtn");
        const resizeButton = document.getElementById("resizeButton");

        // Open the modal when the open button is clicked
        openBtn.addEventListener("click", () => {
            modal.showModal();
        });

        // Close the modal when the close button inside the modal is clicked
        closeBtn.addEventListener("click", () => {
            modal.close();
        });

        // Resize to full screen
        resizeButton.addEventListener("click", () => {
            const modalContent = document.querySelector(".modal-content");
            if (modalContent.classList.contains("full-screen")) {
                modalContent.classList.remove("full-screen");
                resizeButton.textContent = "Resize to Full Screen";
            } else {
                modalContent.classList.add("full-screen");
                resizeButton.textContent = "Exit Full Screen";
            }
        });
   
  
</script>

Please help! :0 :kissing_closed_eyes:

2

Hello,
You have two solutions here
One: change the showModal() to just show(), this will make it work like you want but it will no longer be a modal that sits on top of everything, it will be a normal HTML element that appears in the normal flow (where you inserted in your HTML code) so we will have to fix that manually using CSS
Two: keep showModal() but change the closeBtn variable to something that actually can be clicked, because this method will make your modal popup an actual modal which means anything outside of it cannot be clicked until the modal is closed, so you need to add the close button in the modal itself
One last thing, for any of this to work, you need to change the wrapper div, the one with the id myModal to a dialog element, it is better for your situation and should be used since you are using its methods without it showModal and close
you can read more about it here
: The Dialog element - HTML: HyperText Markup Language | MDN (mozilla.org)