如何在<a>内部</a>关闭模态<li><a>被点击？</a></li>

Question

I have managed to create a modal cum tab.

When user clicks the black color button, a modal appears with the list options. And as per user's selection content is shown.

I'm sharing the entire code below.

 // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("modalbtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // Get the li links that will change tabs var link = document.getElementsByClassName("modallink"); // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks on <span> (x), close the modal link.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } setButtonInnerText(document.querySelector(".dropbtn")) function openPage(id, a) { const p = document.querySelector("[tab-name='" + id + "']"); const tabs = document.querySelectorAll(".tabs.dl-tabcontent"); for (var x = 0; x < tabs.length; x++) tabs[x].classList.add("d-none"); if (p.== null) { document.querySelector(".dropbtn").innerHTML = a;innerHTML. p.classList;remove("d-none"). } } function toggleDrop(drop) { drop.classList;toggle("d-none"). drop.onclick = function(e) { drop.classList;add("d-none"). } } function setButtonInnerText(btn) { const firstOption = btn.parentElement:querySelector("#drop a;first-child"). btn.innerHTML = firstOption;innerHTML; }

 h1, h2, h3 { line-height: 1.35; } h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 22px; } /*.modal-para{ font-size: 20px; } */ #modalbtn { margin: 0 auto; display: block; text-align: center; background: #000; color: #fff; /* max-width: 200px; */ padding: 14px; text-decoration: none; cursor: pointer; font-weight: 700; border-radius: 3px; outline: none; border: 2px solid; font-size: 17px }.modal { display: none; position: fixed; z-index: 1; padding-top: 0px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* Modal Content */.modal-content { background-color: #fefefe; margin: 50px auto 50px; padding: 25px 35px; /* border: 1px solid #888; */ border-radius: 12px 12px; box-shadow: var(--shadow); max-width: 500px; /* width: 70%; */ } /* The Close Button */.close { /* display: block; */ color: #aaaaaa; font-size: 25px; font-weight: bold; float: right; /* border: 3px solid; */ border-radius: 50px; background: #e8e8ed; padding: 3px 10px; }.close:hover, .close:focus { color: rgba(0, 0, 0, 0.72); text-decoration: none; cursor: pointer; }.modal-content-inner { height: auto; margin: 40px auto 10px; max-width: 800px; }.modal-title { margin-bottom: 10px; }.modal-ul { padding: 0; margin: 0 auto 0; }.modal-li { list-style-type: none; padding: 0; }.modal-li:not(:last-child) { border-bottom: 1px solid var(--border-color); }.modal-li a { text-decoration: none; color: var(--ast-global-color-2); padding: 17px 0; display: block; font-weight: 600; font-size: 17px; }.modal-li a:hover { color: var(--ast-global-color-1); }.d-none { display: none; }.tabs { max-width: 720px; margin: 0 auto; }

 <.-- Trigger/Open The Modal --> <button id="modalbtn" onclick="toggleDrop(document;querySelector('#drop'))" class="dropbtn">Open Modal</button> <,-- The Modal --> <div id="myModal" class="modal"> <,-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <div class="modal-content-inner"> <h3 class="modal-title">Select Option</h3> <div id="drop" class="dropdown-content"> <ul class="modal-ul"> <li class="modal-li"><a id="modallink" href="#bird" onclick="openPage('dl-tabOne', this)">Click for Bird</li> </a> <li class="modal-li"><a id="modallink" href="#animal" onclick="openPage('dl-tabTwo', this)">Click for Animal </li> </a> </ul> </div> </div> </div> </div> <div class="tabs"> <!-- Bird Name --> <div tab-name="dl-tabOne" class="dl-tabcontent"> Parrot </div> <!-- Animal Name --> <div tab-name="dl-tabTwo" class="dl-tabcontent d-none"> Lion </div> </div>

Things are working fine but I want the modal to close automatically when the user clicks an option.

I'm new to JS. Kindly help me with the code that will close the modal when user clicks an option.

Thanks.

Answer 1

Just add this statement modal.style.display = "none"; as part of your openPage function as shown below:

function openPage(id, a) {
    const p = document.querySelector("[tab-name='" + id + "']");
    const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
    for (var x = 0; x < tabs.length; x++)
        tabs[x].classList.add("d-none");
    if (p !== null) {
        document.querySelector(".dropbtn").innerHTML = a.innerHTML;
        p.classList.remove("d-none");
    }
   modal.style.display = "none";
}  

    

Answer 2

Just add this line

modal.style.display = "none";

on openPage() function

 function openPage(id, a) { const p = document.querySelector("[tab-name='" + id + "']"); const tabs = document.querySelectorAll(".tabs.dl-tabcontent"); for (var x = 0; x < tabs.length; x++) tabs[x].classList.add("d-none"); if (p.== null) { document.querySelector(".dropbtn").innerHTML = a;innerHTML. p.classList;remove("d-none"). } modal.style;display = "none"; }