Develop Reference

unable to insert 03 popup in one page

i am trying to implement 03 popup on my page but unable to do so. i am trying to achieve this by assigning different ID to each popup. any help is highly appreciated. Here is my code
CSS:
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
font-size:20px;
transition: 1s ease-out;
}
/* 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 ;}
}
Here is my HTML:
<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
MY JS Code:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunctions(x) {
x.classList.toggle("fa-times-circle");
}
Here i am trying to apply 2nd popup:
<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
<span class="popuptext" id="myPopup2">A Simple Popup 2</span>
</div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
}
</script>
and same for popup three. i am stuck here. Thanks in advance

You can't create more than one function with the same name. However, one solution is create a reusable function and pass the clicked element to it. Then on your popup div also add a data attribute called data-target that holds the ID of the popup you want to open.
For example:
<div class="popup" data-target="myPopup" onclick="myFunction(this)">
or
<div class="popup" data-target="myPopup2" onclick="myFunction(this)">
Then you will only need the below single function, you won't have to duplicate it.
function myFunction(el){
var popup = document.getElementById(el.dataset.target);
popup.classList.toggle("show");
}

Close popup by clicking outside it javascript

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

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

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

How to insert a popup inside a table cell?

I have the following html and would like to wrap a table cell (1x1, with length and width easily editable) around the onclick function pop-up.
This includes HTML, CSS, and JavaScript.
This may eventually include several columns in one row, with multiple popups, so if possible please make this adaptable.
// When the user clicks on div, open the popup
function myFunction901() {
var popup901 = document.getElementById("myPopup901");
popup901.classList.toggle("show901");
}
/* Popup container - can be anything you want */
.popup901 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
color: #feb330;
"
}
/* The actual popup */
.popup901 .popuptext901 {
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: -31px;
}
/* Popup arrow */
.popup901 .popuptext901::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 */
.popup901 .show901 {
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;
}
}
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<div class="popup901" onclick="myFunction901()"> Teams
<span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
</div>

I don't know if is the best way, but i was able to do it declaring "n" inside your function,
function myFunction901(n) {
then for each onclick function in each popup you assing a number,
example:
onclick="myFunction901(1)"
lastly in your function i wrote the element id get as:
var popup901 = document.getElementById("myPopup90"+n);
so it reads that number and get the matching id.
You can then style the popup area with css to make em as you want (more square like etc.).
Check the code below:
<html>
<head>
<style>
/* Popup container - can be anything you want */
.popup901 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
color:#feb330;"
}
/* The actual popup */
.popup901 .popuptext901 {
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: -31px;
}
/* Popup arrow */
.popup901 .popuptext901::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 */
.popup901 .show901 {
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 ;}
}
</style>
</head>
<body>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<table>
<tbody>
<tr>
<td>
<div class="popup901" onclick="myFunction901(1)"> Teams
<span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(2)"> Teams
<span class="popuptext901" id="myPopup902">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(3)"> Teams
<span class="popuptext901" id="myPopup903">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(4)"> Teams
<span class="popuptext901" id="myPopup904">2016, 2018: 22</span>
</div>
</td>
</tr>
</tbody>
</table>
<script>
// When the user clicks on div, open the popup
function myFunction901(n) {
var popup901 = document.getElementById("myPopup90"+n);
popup901.classList.toggle("show901");
}
</script>
</body>
</html>
is this what you meant?

only show modal scroll when a modal is open

Hi can someone tell me why my solution doesn't work, I would like to hide the scroll of my page when a modals is opened.
and allow the scroll on my modal too.
By the same time if a slide up & down effect could be added it will be awesome.
I used javascript but it doesn't work for me now:
$(function(){
$('.modal').click(function() {
$('body').css({'overflow': 'hidden'});
});
$('.close').click(function() {
$('body').css({'overflow': 'scroll'});
});
});
here is my code:
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
x
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3. You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
X
<div class="middle">
Modal Box 2
Box 2
yadda yadda
</div>
</div>
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
overflow:scroll;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
here is a jsfiddle
http://jsfiddle.net/kodjoe/3Vykc/641/

You are trying to use jQuery, but you never included it. Check out the code below. My approach is a little different from yours. I add and remove class instead of changing css property.
$(function(){
$('.modal').click(function() {
$('body').addClass('scroll');
});
$('.close').click(function() {
$('body').removeClass('scroll');
});
});
.scroll {
overflow: hidden;
}
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
overflow:scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
x
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3.
You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
X
<div class="middle">
Modal Box 2 Box 2 yadda yadda
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>
<div style="background:#ccc;height:1500px;"></div>