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'))" >Open Modal</button>

<!-- The Modal -->
<div id="myModal" >

  <!-- Modal content -->
  <div >
    <span >&times;</span>

    <div >
      <h3 >Select Option</h3>

      <div id="drop" >
        <ul >
          <li ><a id="modallink" href="#bird" onclick="openPage('dl-tabOne', this)">Click for Bird</li>
                        </a>
            <li ><a id="modallink" href="#animal" onclick="openPage('dl-tabTwo', this)">Click for Animal
                        </li>
                        </a>
        </ul>
      </div>

    </div>

  </div>

</div>


<div >
  <!-- Bird Name -->
  <div tab-name="dl-tabOne" >
    Parrot
  </div>

  <!-- Animal Name -->
  <div tab-name="dl-tabTwo" >
    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.

CodePudding user response：

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";
}  

    

CodePudding user response：

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";
}