CODEWITHSUNDEEP
javascriptpopuppopupwindow
bbBell
bbBell

Reputation: 23

Close one pop-up, when opening another

my popups work just fine, but they will all stay open when clicked, instead of only allowing for one popup at a time. I have found this question asked, but I think my very low-level knowledge of JS isn't allowing me to easily modify the answers given for someone else's code, into my own. Big time noob here

JS

`   function myFunction(event) {
      event.target.children[0].classList.toggle("show");
    }`

HTML

    <div class="popup" onclick="myFunction(event)">Select 1 <span class="popuptext" id="myPopup">Tet Here </span></div>
  &nbsp; &nbsp; &nbsp;
  <div class="popup" onclick="myFunction(event)">Select 2 <span class="popuptext" id="myPopup1"> Text Here</span></div>
Select 3 Text Here

CSS

    .page-writing .popup {
    height: 3em:
    width: 3em;
    position: relative;
    position: relative;
    display: inline-block;
    cursor: pointer;

    font-family:bookmania, serif;
    font-size: .8rem;
    color: black;
    -webkit-opacity: .6;
    -moz-opacity: .6;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
}
.page-writing .popuptext {
    visibility: hidden;
    height: 6em;
    width: 20em;
    color: purple;
    overflow: auto;
    text-align:left;
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    z-index: 1;
    top: 85%;
    left: 0%;
    margin-top: .5em;
}

.page-writing .popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px:
    border-width 2px;
    border-style:none;
    border-color: transparent;
}

.page-writing .popup .show{
    visibility: visible;
    -webkit-animation: easeIn 1.5s;
    animation: easeIn 1.5s;
}

@-webkit-keyframes easeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes easeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

Upvotes: 2

Views: 798

Answers (1)

Carolyn Hodges
Carolyn Hodges

Reputation: 181

Try the following approach:

var lastPopup;
function myFunction(event) {
  lastPopup && lastPopup.classList.remove("show");
  lastPopup = event.target.children[0];
  lastPopup.classList.toggle("show");
}

Upvotes: 2

Related Questions