CODEWITHSUNDEEP
javascriptcss
Asn
Asn

Reputation: 93

Don't close CSS popup when clicking on it

I am trying to add a form within a popup, but whenever you click the text box in the popup it closes and you cant type in the text box, is there a way to disable click to close? and only have it so clicking out the pop up it closes rather than within the pop up. I have tried to change the CSS of the myPopup and added 'pointer-events:none' but that disables click to all components within the popup.

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
/* Popup container - can be anything you want */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* The actual popup */

.popup .popuptext {
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  height: 200px;
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class - hide and show the popup */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


/* Add animation (fade in the popup) */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<body style="text-align:center">

  <h2>Popup</h2>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="popup" onclick="myFunction()">Click me to toggle the popup!
    <span class="popuptext" id="myPopup"><input type="text" id="fname" name="fname"><br><br> 
<button> 
<button></span>
  </div>

Upvotes: 2

Views: 732

Answers (1)

Andi
Andi

Reputation: 2992

It's because your entire div and anything that's contained within it is being triggered by the onclick. Create a button with the onclick function and use that to power the opening and closing of the popup.

Also, consider using an eventListener instead of the inline onclick as that's generally discouraged.

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Which could be written as:

const element = document.getElementById("myBtn");
element.addEventListener("click", function() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
});


// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  height: 200px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
<body style="text-align:center">

  <h2>Popup</h2>
  <br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="popup">
    <span class="popuptext" id="myPopup"><input type="text" id="fname" name="fname"><br><br>
    </span>
    <button onclick="myFunction()">
    Click me to toggle the popup!
    </button>
  </div>
</body>

Upvotes: 1

Related Questions