We Keep Coding

How can I add more than one popup and how can I change it in css?

I have two questions I cannot quite figure it out.
My first one is, how can I change the following code, so I can add more than one popup on my website. In JS it is
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
and in HTML
<p> Hello!<div class="popup" onclick="myFunction()">
<p>this is clickable </p>
<span class="popuptext" id="myPopup">this is inside my popup</span> </div>
</p>
I need to change the function so I can have more than just the popup above. How can I do that? It is clear I need another ID than myPopup but how can I add more variables in the JS??
2)
This below is my CSS but when in HTML, the text before the DIV is showed normally on my website but because of the DIV the text shows up one line below the text. Do I need to declare something in the div so the whole text shows up in one line?
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popuptext {
visibility: hidden;
width: 160px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 16px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #D2B48C transparent transparent transparent;
}
.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;
}
}
Thank you very much for any kind of help!

You don't need another ID. With querySelectorAll() you can select all elements with a given ID.
Use span instead of div. <p> also will make a line break.
My edits on your code:
span instead of div and left <p> tags
added a new popup
deleted onclick attributes (isn't a good practice, use addEventListener instead)
whole JavaScript
added color: #000 to .popup .show in CSS
const myElements = document.querySelectorAll(".popup")
myElements.forEach(el => {
el.addEventListener("click", () => {
el.querySelector("#myPopup").classList.add("show");
})
})
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popuptext {
visibility: hidden;
width: 160px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 16px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #D2B48C transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
color: #000;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<br><br><p> Hello!
<span class="popup">
this is clickable
<span class="popuptext" id="myPopup">
this is inside my popup
</span>
</span>
<span class="popup">
this is clickable
<span class="popuptext" id="myPopup">
this is inside my popup
</span>
</span>
</p>

I was able finally to solve your problem. This screenshot may act as an answer to your both questions.
I really don't know how you want the popup design to be. In all cases, this is a valid code, i.e. when you click on "this is clickable", both popups will appear at the same time.
Code to copy paste:
function myFunction() {
var popups = document.getElementsByClassName("popuptext");
for (var i = 0; i < popups.length; i++)
popups[i].classList.toggle("show");
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
.popuptext {
opacity: 0;
width: 160px;
color: black;
border-radius: 6px;
padding: 16px 0;
z-index: 1;
}
.popup .popuptext::before {
content: "";
border-width: 10px;
border-style: solid;
border-color: #d2b48c transparent transparent transparent;
}
.show {
opacity: 1;
transition: opacity 1s;
}
<p> Hello!
<div class="popup" onclick="myFunction()">
<p>this is clickable </p>
<p class="popuptext">
this is inside my 1st popup
</p>
<p class="popuptext">
this is inside my 2nd popup
</p>
</div>
</p>
For further assistance, I am available.

How to close popup form when the user click outside the form? [duplicate]

I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.
I've tried adding an invisibleDiv as per this post Close pop up div by clicking outside of it but the popup is still only moving when the button itself is clicked.
https://www.w3schools.com/howto/howto_js_popup.asp
// 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: 160px;
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;
}
/* 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 ;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>
</html>

Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:
const popups = [...document.getElementsByClassName('popup')];
window.addEventListener('click', ({ target }) => {
const popup = target.closest('.popup');
const clickedOnClosedPopup = popup && !popup.classList.contains('show');
popups.forEach(p => p.classList.remove('show'));
if (clickedOnClosedPopup) popup.classList.add('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: 160px;
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;
}
/* 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 .popuptext {
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 ;}
}
<h2>Popup</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>

Add an onclick to the popup's container and stop event propagation on all internal elements you don't want to trigger the action.
let popup = document.querySelector(".popup");
function toggle(e) {
e.stopPropagation();
popup.classList.toggle("hide");
}
function closePopup() {
if (!popup.classList.contains("hide")) {
popup.classList.toggle("hide");
}
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightgray;
display: flex;
flex-direction: column;
justify-content: center;
}
.popup {
width: 100px;
height: 100px;
background: white;
margin: 0 auto;
}
button {
position: fixed;
top: 0;
}
.hide {
display: none;
}
<div class="container" onclick="closePopup()">
<div class="popup hide" onclick="event.stopPropagation()"> </div>
<Button onclick="toggle(event)">Toggle</Button>
</div>

PHP
<?php
echo '<div>Display Content</div>';
echo '<div id="viewcontent"></div>';
?>
Script
Fill the generated content to the inside div
function showcontents()
{
var content = 'Add dynamic content';
$('#viewcontent').html(content);
}
Empty the div content by clicking outside div
$("body").click(function(e)
{
var contentlength = $("#viewcontent").text().length;
if(contentlength > 0 && e.target.id != 'btnshow'){
$('#viewcontent').html("");
}
}

popup remains in the occupied area although closed

I encounter the following problem: I made a simple implementation of a popup, but when I close it and put the cusrsor on the blank area where previously was the popup, I can now click there (in the blank area) and the popup appears again. That is, it seems as if it does not close and it remains in the area which previously it was occuping. Could please someone help me because i do not understand how to make it close permantly.
function fPopUp() {
var PopUp = document.getElementById("IDPopUp");
PopUp.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: absolute;
/*display: 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;
/*display: none;*/
width: 500px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
}
/* 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 ;}
}
<button id="bAbout" onclick="fPopUp()">PopUp</button>
<div class="popup" onclick="fPopUp()">
<span class="popuptext" id="IDPopUp">"some text"</span>
</div>

Using visibility: hidden will hide the element from sight but the element will still occupy its predetermined space on the document. To completely hide the element, you need to use display: none but this doesn't play well with animations.
Your code makes things much more complicated than they have to be, so allow me to make some amendments. Here are a few suggestions:
Put the id on the actual popup instead of its content. You're trying to show/hide the popup, not its text.
This is a rather simple animation, so a simple CSS transition will do just fine.
Use pointer-events: none to make your element unresponsive to mouse events. The element will still occupy the space it normally does, but nobody will know.
function fPopUp() {
IDPopUp.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: absolute;
cursor: pointer;
user-select: none;
pointer-events: none;
opacity: 0;
transition: opacity 1s;
}
/* The actual popup */
.popup .popuptext {
width: 500px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
}
/* 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 {
opacity: 1;
pointer-events: auto;
}
<button id = "bAbout" onclick = "fPopUp()">PopUp</button>
<div id = "IDPopUp" class = "popup" onclick = "fPopUp()">
<span class = "popuptext">"some text"</span>
</div>

How to show popup at right side on hover?

I am currently showing a popup at the top when a user hovers on a link or text. But, the problem is the popup isn't visible properly on screen. The top part of the popup is being invisible in the browser. I am using twitter-bootstrap in my application. How do I get the popup to show on the right side of the element instead of on top?
function showPopup(element) {
elements = $(".popuptext")
$.each(elements, function(i, e) {
e.classList.remove("show");
})
popup_id = $(element).attr("data-popup-id")
var popup = document.getElementById(popup_id);
popup.classList.add("show");
}
function hidePopup(element) {
popup_id = $(element).attr("data-popup-id")
var popup = document.getElementById(popup_id);
popup.classList.remove("show");
popup.classList.add("hide");
}
/* 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: 350px;
background: #ffffff;
color: #585858;
text-align: center;
border-radius: 6px;
border: solid 1px black;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
/*left: 100px;*/
margin-left: -80px;
}
/* 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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
Hover On this text
<span class="popuptext show" data-popup-id="popup-c5e1e2c5" id="popup-c5e1e2c5" onmouseleave="hidePopup(this)">
My Whole content
</span>
</div>
Any help is appreciated, thank you.

If you want to solve this via HTML:
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Popup text.">
Popover on right
</button>
If you want to solve this via JS:
$('#showPopup').popover('right')
You can learn more about Popovers in the bootstrap docs

Onclick only every other click

The problem I have come up to is that the onclick function I have made in JavaScript only can be executed every other click on the button. This happened after adding this code (because I want to hide the class/div after x seconds):
popup.classList.toggle("show");
setTimeout(
function() {
popup.classList.toggle("hide");
}, 750);
}
So with other words, it works the first time clicking then when the class is shown for x seconds and when I am gonna click it again. Nothing happens, but on the next click it works. And this goes on and on and on. What can the problem?
I tried copying the code but it doesnt seem to work in jsfiddle as it did in the project. If someone could tell me whats the problem in this code and how to make it show the popup every time the button is clicked.
https://jsfiddle.net/xxuvwc1b/
function showpop() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
setTimeout(
function() {
popup.classList.toggle("hide");
}, 750);
}
.popup {
background-color: black;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-weight: bold;
font-family: 'Raleway', sans-serif;
font-size: 1em;
text-decoration: none;
color: green;
float: left;
border-radius: 5px;
border: none;
width: 100%;
}
:focus {
outline: 0 !important;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
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;
}
/* 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;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<button class="popup" onclick="showpop();"><span class="popuptext" id="myPopup">HERE I AM!</span>SHOW ME A POPUP</button>

You click on it and add the class show. Almost a second later, you add the class hide (it still has the class show).
You click on it again and you remove the class show. Almost a second later, you remove the class hide.
The next click adds both. The 4th removes both. And so on.
Use a single class and toggle that on and off.