How do I make a popup close when I click off it/click on a different one?
I've used EventListener to perform the function for the first popup, but when I do the same to a second popup the first popup stops working.
I've tried duplicating the JS code using different Function names and ID for the popups.
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction();
});
var popup = document.getElementById("myPopup2");
function myFunction2() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction2();
});
/* 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 ;}
}
<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>
<h2>Popup2</h2>
<div class="popup" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>
Simply add another listener on the document, which will close any open modals.
Then add/modify one on your modal which will stop click events from bubbling up.
The end result is, click anywhere and if the click was over the modal, the modal will intercept and block, otherwise clicking anywhere else, then the document will receive the bubbled event and close the modal...
For good measure you can add a listener for the esc keydown event and close any open modals too
Related
I would like to implement a popup when I click on a part of a mathjax equation.
Here is what I have so far :
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: relative;
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 when clicking on the popup container (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>
<!-- Jquery importation -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- MathJax configuration -->
<script>
MathJax = {
loader: {
load: ['[tex]/action', '[tex]/html']
},
tex: {
packages: {'[+]': ['action', 'html']}
}
};
</script>
<!-- MathJax importation -->
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
<!-- Link to style sheet -->
<link rel="stylesheet" href="popup.css">
<script>
function clickFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</head>
<body>
<!-- Classical popup -->
<div class="popup" onclick="clickFunction()">Click me!
<span class="popuptext" id="myPopup">this is the acceleration</span>
</div> <br>
<!-- Matjax popup -->
Click here : \( \cssId{popup}{a} = \frac{dv}{dt} \)
<script>
$('#popup').click(function(){
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
</script>
</body>
</html>
I would like to make appear "this is the acceleration" when someone clicks on "a" but I don't find a way to associate my click function to a subsection of my equation by only using the \cssId{popup}{a}.
How do i customize css so the popup alert just like this but instead alert popup focus in a button.
i have use this kind of validation on text box
<div class="form-group">
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label>
<div class="col-sm-5">
<input type="email" class="form-control" id="judul_laporan" >
<span style="color: red" id="warnlaporan"></span>
</div>
</div>
<button type="button" id="save_laporan"></button>
JQuery
$("#save_laporan").click(function(){
var judul_laporan = $('input[name="judul_laporan"]');
if(judul_laporan.val() == ''){
judul_laporan.parent().parent().addClass('has-error');
$('#warnlaporan').text("Judul Laporan Belum Ada");
judul_laporan.focus();
result
}else{
judul_laporan.parent().parent().removeClass('has-error');
$('#warnlaporan').text("");
}
But i dont know how to make a popup alert likes the image ( and it should be button )
You can see the x3schools' documentation. It gives you a sample popup at the top of a div.
This code opens a popup:
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.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 when clicking on the popup container (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 ;}
}
<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
You also can use microtip, it is a pretty library witch give you the opportunity to create simply popup. This is the only declaration: <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">. However, you have to download a package (just 1kb) with rpm in your server.
I have an element that has pointer events set to none, this is so hover styles for child elements don't show.
However when this element is clicked on I want to do something with JavaScript. Using an onclick event in JavaScript does not seem to work because pointer-events is set to none.
Is there a way around this so that I can have an element with no pointer events that can still trigger a JavaScript event?
[data-drawer="open"] {
.site-drawer {
transform: translateX(0);
transition: all .2s ease;
}
.site-container {
transform: translateX(-27.5rem);
// Disabling pointer events disables styles hover styles on below elements
// But also disables clicking on container to remove it.
pointer-events: none;
transition: all .2s ease;
&:after {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.75);
content: "";
}
}
}
JavaScript:
this.siteContainer.addEventListener('click', (e) => {
console.log('site container clicked');
if(document.body.hasAttribute('data-drawer')) {
document.body.removeAttribute('data-drawer');
}
});
Cheers
You can use this work around. Set pointer-events: none to the element that has the hover effects, And add a wrapper div to the elements that still needs to be triggered on click.
$(".cant-click-this").on("click", function(ev) {
console.log("You cant trigger the element, and it has no hover effects.");
});
$(".click-me-instead").on("click", function(ev) {
console.log("You can trigger click through the wrapper.");
});
.cant-click-this {
pointer-events: none;
}
.cant-click-this:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click-me-instead">
<button class="cant-click-this"> Try to click me</button> <br>Hovering is futile.
</div>
As I mentioned in the comments, you can achieve this by adding a non-clickable overlay on top of your content using pseudo-elements and z-index
Essentially you have four layers.
the content of the website (white)
the overlay that covers the content of the website while the modal
is open (grey)
the modal (red)
the layer that covers the modal contents. (transparent)
Result: user can't click inside the modal but can click outside anywhere on layer #2
Rough example:
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
background: rgba(0, 0, 0, .5)
}
.close {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
display: none;
z-index: 1;
position: fixed;
cursor: default;
}
.modal-content:after {
content: "";
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
.modal:target>.close {
display: block;
}
.modal>div {
width: 300px;
text-align: center;
padding: 40px;
z-index: 2;
position: relative;
background: red;
}
.wrap,
.modal {
display: flex;
align-items: center;
justify-content: center
}
<div class="wrap">
<button>You can click me!</button>
<div id="M" class="modal">
<div class="modal-content">
<button>But not me!</button>
</div>
</div>
</div>
I am working on a language selector button on a webpage. The language selector button here is the green settings button as shown below:
It will work in way that if I click on the button then the drop-down menu will show up. If the language is already in English then it will ask us to select the French language and vice-versa as shown below:
The HTML which I have used for the button is:
<span class="label-mobile-languageselector" onclick="myFunction()"><img src="img/SettingsSign.png" alt="LanguageSelector">
<span class="popuptext" id="myPopup">English</span>
</span>
I am wondering, how can I display the whole page in English or French after clicking the English or French text as shown above in the 2 images ? At this moment; if I click on "French" text, "English" text is getting displayed on the popup and vice-versa but there is no language conversion.
The CSS which I have used for the button is:
/* Popup container - can be anything you want */
.label-mobile-languageselector {
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 */
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 160px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -55%;
left: 45%;
margin-left: -80px;
}
/* Popup arrow */
.label-mobile-languageselector .popuptext::after {
content: "";
position: absolute;
top: -35%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: red transparent transparent transparent;
transform: rotateX(180deg);
}
/* Toggle this class - hide and show the popup */
.label-mobile-languageselector .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 ;}
}
I think (not sure) I need to write a JavaScript code in order to create the popup for it. The JavaScript which I have written in order to create popup is:
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show')
if (!popup.classList.toggle('show')) {
if (popup.innerHTML == "English") {
popup.innerHTML = "French";
popup.classList.toggle('show')
} else {
popup.innerHTML = "English";
popup.classList.toggle('show')
}
} else {
popup.classList.toggle('show');
}
}
Create a new HTML document in the language that you desire.
Link to it
e.g. This document in French
HTML and JavaScript do not come with translation tools built in.
Third party automated translation tools, such as Google Translate, exist … but produce pretty poor results and are best left to users to initiate manually rather than having web authors endorse them.
I am trying to make popups containing list of lines:
Support
Contact
Demo
In the 1st line, it should display Support. In the 2nd line, it should display Contact and in the 3rd line, it should display Demo.
I was able to create popups containing one line by following the w3schools link http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup but I am not sure how to create popups having multiple lines.
The pictorial representation of what I am trying to get is shown here:
The code which I have used from the w3schools link is shown below:
<!DOCTYPE html> <html> <style> /* 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 ;} } </style> <body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">Support</span> </div>
<script> // When the user clicks on div, open the popup function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show'); } </script>
</body> </html>
In place of A Simple Popup, I have written Support. At this moment, I am able to get only one line as shown here:
As a quick try do these steps to design what you want
1- open you mentioned link
2- change the html code to :
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<div class="popuptext" id="div">
<div><span id="myPopup">Support</span><br/></div>
<div><span id="myPopup1">Contact</span><br/></div>
<div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>
3- change myFunction() code block to :
var popup = document.getElementById('div');
popup.classList.toggle('show');
4- Add this css class to style element in head
.popup .popuptext div{
text-align: center;
background:#ad4747;
border-radius: 6px;
width: 160px;
margin-top:2px;
}
5- At the end run and see the result
but as you know there are several ways to design popup menu by front-end tools ,
but my solution is a quick design hope give you some help.
Additional helpful link