Top Layer

Why are there so many top-layer tag in this. Shouldn't it be just one. The HTML:

<dialog class="searchModal" aria-hidden="true">
        <span class="closeModal">
            <i class="fa-solid fa-circle-xmark"></i>
        </span>
        <input type="search" id="search" class="searchbar" placeholder="Search...">
        <div id="results">
        </div>
    </dialog>

<dialog class="searchModal" aria-hidden="true">
        <span class="closeModal">
            <i class="fa-solid fa-circle-xmark"></i>
        </span>
        <input type="search" id="search" class="searchbar" placeholder="Search...">
        <div id="results">
        </div>
    </dialog>

Here's the script I'm using for opening the dialog:

const searchModalOpen = document.querySelector('.fsb');
    searchModalOpen.addEventListener('click', (e)=>{
        const modal = document.querySelector('.searchModal');
        const hidden = modal.getAttribute('aria-hidden');
        if(hidden === 'true'){
         modal.setAttribute('aria-hidden' , 'false');
         modal.showModal();
        }
        const closeModal = document.querySelector('.closeModal i');
       closeModal.addEventListener('click', () =>{
            const modal = document.querySelector('.searchModal');
            const hidden = modal.getAttribute('aria-hidden');
            if(hidden === 'false'){
            modal.setAttribute('aria-hidden', 'true');
             modal.close();
            }
        })
    })

const searchModalOpen = document.querySelector('.fsb');
    searchModalOpen.addEventListener('click', (e)=>{
        const modal = document.querySelector('.searchModal');
        const hidden = modal.getAttribute('aria-hidden');
        if(hidden === 'true'){
         modal.setAttribute('aria-hidden' , 'false');
         modal.showModal();
        }
        const closeModal = document.querySelector('.closeModal i');
       closeModal.addEventListener('click', () =>{
            const modal = document.querySelector('.searchModal');
            const hidden = modal.getAttribute('aria-hidden');
            if(hidden === 'false'){
            modal.setAttribute('aria-hidden', 'true');
             modal.close();
            }
        })
    })

1 Reply

kirin-808•15mo ago

I suspect a bug with Chromium devtools since it's a pretty recent feature, had the same thing going on on a project I was working on couple of months ago

Gaming

Programming

Top Layer