hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND
replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">
I have a problem creating a small dialogue box to show when I've clicked the picture. Now my popup content just shows below the picture. Below is my coding:
function showpopup() {
document.getElementById("popupwindow").classList.toggle("hidden");
}
<style>
.hidden {display:none}
</style>
<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>
Actually, I want the result like below the picture, the popup content can show in the small dialog box.
Hope someone can guide me on how to solve it. Thanks.
Refer this:
function showpopup() {
let tooltip = document.getElementById("tooltiptext");
let visible = tooltip.style.display;
if (visible == "none") {
document.getElementById("tooltiptext").style.display = "block";
} else {
document.getElementById("tooltiptext").style.display = "none";
}
}
img {
cursor: pointer;
margin-top: 30px;
}
.tooltip {
display: block;
background: black;
border-radius: 5px;
max-width: 300px;
width: 300px;
position: absolute;
padding: 12px 18px;
font-family: open-sans-regular, sans-serif;
font-size: 14px;
color: white;
line-height: 22px;
box-sizing: border-box;
z-index: 1000;
outline: none;
}
.tooltip.bottom .arrow {
top: 0;
left: 50%;
border-top: none;
border-bottom: 10px solid black;
}
.tooltip .arrow {
width: 0;
height: 0;
position: absolute;
left: 50%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #43b02a;
margin-top: -10px;
margin-left: -10px;
}
<img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></img>
<div id="tooltiptext" class="bottom tooltip" style="display: none;">
<div class="arrow">
</div>
LMS short explanation
</div>
You need to define the css for pop-ups.
position, top, left, z-index, background color, width, height and so on.
you can follow this link
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip.tooltiptext {
visibility: visible;
}
.hidden{
display: none;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip" onClick="showpopup()">Hover over me
<span id="popupwindow" class="tooltiptext">Tooltip text</span>
</div>
<script>
function showpopup() {
document.getElementById("popupwindow").classList.toggle("hidden");
}
</script>
</body>
</html>
function showpopup() {
let popup = document.getElementById("popupwindow");
let display = popup.style.display;
if (display == "none") {
popup.style.display = "inline-block";
} else {
popup.style.display = "none";
}
}
<style>
#popupwindow {
position: relative;
display: none;
width: 200px;
z-index: 99;
top: -90px;
left: -150px;
border: 3px solid red;
}
.profile {
display: inline-block;
border: 5px solid red;
}
</style>
<div>
<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>
</div>
I'm having trouble with the snippets editor so i can't post it properly.
but , here is the codepen regarding your code.
you must enclose all html in a div and the change the postion relative to it.
for the popup , you have to style it with borders,margin,background,etc.
If anyone can correct it then please make the snippet above working.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
body, html {
height: 100%;
}
.parallax {
background-image: url('../images/firstpage.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground
{
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}
<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
</div>
What is the problem here? It should dropdown 2 different things when i click the specific button .. but it doesn't.
If i click dropdown it shows home about contact. If i click dropdown 2, same home about contact, but i want it to be home2 about2 contact2.
The entire website contains 5 parallax slides. It is a project for school, to obtain some sort of license, so i'm really trying to understand that code ( and mostly i do ). I understand every "function" but when i combine them all... i just screw up.
So, please, be as clear as you can. Thank you !
P.S: Excuse my bad english, it's not my first language.. :(
You are using the same ID for two different div elements.
IDs must be unique.
You may solve this issue simply adding the id text and event object to your inline events:
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
And so you can change your function in order to handle the parameters.
When clicking on a dropbtn button:
stop event propagation in order to avoid the window.onclick execution
hide/remove show class to the dropdown-content div if any
toggle the show class on the current dropdown-content div
When clicking on the window be sure to be outside the dropdown-content visible div and dropbtn buttons.
For more details take a look to:
var elt = element.closest(selectors);:
The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
- >var result = element.matches(selectorString);
The snippet:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(eleId, event) {
//
// stop event propagation in order to avoid the window.onclick execution
//
event.stopPropagation();
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
//
// select by id using the param value
//
document.getElementById(eleId).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
//
// if not a button and not a dropdown-content....
//
if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
}
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground {
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}
<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
<div id="myDropdown2" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
</div>
I have a menu on the left where all the elements have the same class. I've added the event $('.menuitem').click and also tried several other options, even calling the event based on the div id but without success.
As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.
Here is the Fiddle
HTML:
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
DOM:
$(document).ready(function(){
console.log("loaded");
$('.menuitem').click(function(){
console.log("CLICKED 1");
});
$('#entity').click(function(){
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function(){
console.log('CLICKED 3');
});
});
As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.
Negative z-index will not let event to dispatch on elements.
$(document).ready(function() {
console.log("loaded");
$('.menuitem').click(function() {
console.log("CLICKED 1");
});
$('#entity').click(function() {
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function() {
console.log('CLICKED 3');
});
});
.header {
position: absolute;
background-color: #525252;
height: 5%;
width: 100%;
min-height: 30px;
display: block;
margin: 0;
z-index: 0;
font-weight: 700;
line-height: 175%;
font-size: 1.4em;
text-align: center;
color: #FFFFFF;
display: inline-block
}
.mainwindow .menupane {
position: relative;
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
//z-index: -1;
padding-top: 40px;
}
.mainwindow .contentpane {
position: relative;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
margin: 0;
//z-index: -2;
padding-top: 40px;
}
.menuitem {
background-color: #525252;
position: relative;
width: 75%;
height: 1.5em;
min-height: 10px;
border-radius: 0.65em;
margin: 7.5%;
color: lightgray;
/*font-size: 0.8vw;*/
/*line-height: 1.5em;*/
padding-left: 10%;
border: 0.05em solid lightgray;
/*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
transform: rotate(90deg);
transition: transform 180ms ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>COURSES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
</div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
Fiddle Demo
Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/
your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;
the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine
jsfiddle : https://jsfiddle.net/zxgkprw9/3/
.mainwindow .menupane{
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}
Okay so here is my code:
HTML
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="overlay-2"></div>
<div id="main">
</div>
CSS:
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
visibility: hidden;
}
JS
$('.custom_class_1').click(function() {
$('#overlay-2').fadeIn(300);
});
I want to toggle the visibility of #overlay-2 when I click on my button ".custom_class_1"
How can I do this?
Not sure if visibility: hiddenis the route to go in the css. But I do want it hidden on page load as it would cover the entire screen with a dark overlay.
Any help would be much appreciated!
Thanks
If you are using JQuery then use the .hide() method:
$("#overlay-2").hide();
http://api.jquery.com/hide/
This should work:
$('.custom_class_1').click(function() {
$('#overlay-2').toggle();
});
And in your main css, as others have suggested you should use Display: none in place of Visibility: hidden
Use display: none; instead of visibility: hidden;
Here is a pure CSS solution - FIDDLE
HTML
<input type='checkbox' id='inputstyle'></input>
<div class='centerme'>
<label for="inputstyle"><span>Click Me</span></label>
</div>
<div class='hideme'></div>
CSS
.centerme {
width: 80px;
margin: 0px auto;
}
.hideme {
width: 100px;
height: 100px;
background-color: red;
margin: 10px auto;
}
.clickme:active > .hideme {
display: none;
}
input[type=checkbox]:checked ~ .hideme {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type="checkbox"] + div label span {
display:inline-block;
width:80px;
height:30px;
background-color: gray;
border-right: 2px solid black;
border-bottom: 2px solid black;
line-height: 30px;
color: white;
text-align: center;
}
From THIS excellent page.