How to show popup dialog box? - javascript

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.

Related

I tried creating a image popup but failed badly here my script anyone can help me out

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 "">

How to show tooltip On click event Using JavaScript

How can I show a tooltip by clicking on a button with JavaScript ?
Here is my code:
HTML
<div class="tooltip">Hover over me
<div class="tooltiptext">
<button>click me</button>
<span >Tooltip text
</span>
</div>
</div>
CSS
.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;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
The tooltip is showing while doing hover. But I want to show tooltip while using on click event using only JavaScript how will I do that. Please help me.
I whipped up a toggle using ES5. I wasn't sure if you were using a transpiler. I made a couple of tweaks to your CSS.
Depending on your implementation, this should be refactored to use event delegation.
var tooltip = document.querySelector('.tooltip')
tooltip.addEventListener('click', function() {
if (this.classList.contains('active')) {
this.classList.remove('active');
} else {
this.classList.add('active');
}
});
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.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;
}
.tooltip.active .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
<div class="tooltiptext">
<button>click me</button>
<span >Tooltip text
</span>
</div>
</div>
Try the following setup:
html
<button id="button1">click me</button>
<div class="tooltiptext">
<span >Tooltip text</span>
</div>
css
.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;
}
js
var button1 = document.querySelectorAll('#button1');
button1.onclick = buttonClicked;
function buttonClicked(){
var tooltip = document.querySelectorAll('.tooltiptext');
tooltip.style.visibility = 'visible';
}
I guess you want something like this. When you click on "hover me" it shows your tooltip and you can close it with X
<div onmousedown="show()" class="tooltip">
Hover over me
<div id="tooltip" onmouseup="hide()" class="tooltiptext">
<span>Tooltip text </span><span class="close">X</span>
</div>
</div>
CSS:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:hover {
cursor: pointer;
}
.close {
color: red;
}
.close:hover {
cursor: pointer;
}
.tooltip .tooltiptext {
display: none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.block {
display: block !important;
}
JavaScript:
function hide() {
document.getElementById("tooltip").classList.remove("block");
}
function show() {
document.getElementById("tooltip").classList.add("block");
}
Another simple way of achieving this is by using the event listener to change the display style from none to block and vice versa.
For it to work properly is important to add the style attribute to the tooltip element like so: <tooltip id='tooltip' style='display:none'>
const btn = document.getElementById('btn'),
tooltip = document.getElementById('tooltip');
btn.addEventListener('click', () => {
if (tooltip.style.display === "none") {
tooltip.style.display = "block";
}
else{
tooltip.style.display = "none";
}
})
#tooltip {
position: absolute;
margin-top:5px;
width: 80px;
background-color: rgb(0, 0, 0, 0.7);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
}
<div style='position:relative'>
<button id='btn' style='cursor:pointer'>Try me</button>
<tooltip id='tooltip' style='display:none'>
Some text here
</tooltip>
<div>
<div class="tooltip">
Hover over me
<div class="tooltiptext">
<button>click me</button>
<span >Tooltip text
</span>
</div>
</div>
Try using focus
.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;
}
.tooltip a{ color: inherit; text-decoration: none; }
.tooltip a:focus+.tooltiptext {
visibility: visible;
}

how to trigger an event for an element when some other element is clicked in jQuery?

here is my code: https://jsfiddle.net/2vvLe0ko/2/
I want to hide div with class droppointercontainer when the user clicks any other region except click me! div. and show the droppointercontainer div when the user clicks the click me! div.
how to do that with jQuery?
html:
<body>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
</body>
css:
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
javascript:
$("#click1").on("click", function(){
$(this).children("#droppointercontainer1").fadeIn(200);
});
$("#click2").on("click", function(){
$(this).children("#droppointercontainer2").fadeIn(200);
});
You need to call a function that does the job for all clicks...
Edited and added a working proof link.
$("#click1").on("click", function(){
showMe(this);
});
$("#click2").on("click", function(){
showMe(this);
});
$(document).on('click', function(__e){
if(!$(__e.target).hasClass('click')){
$('.droppointercontainer').fadeOut(200);
}
});
function showMe(__obj){
$('.droppointercontainer').each(function(__idx, __el){
if($(__el)[0] !== $(__obj).children('.droppointercontainer:first')[0]){
if($(__el).css('opacity') > 0){
$(__el).fadeOut(200);
}
}
});
$(__obj).children('.droppointercontainer:first').fadeIn(200);
}
Proof
https://jsfiddle.net/2vvLe0ko/7/
Something like this should work
$(document).click(function(e) {
if (!$(e.target).is("#click1") && !$(e.target).is("#click2")) {
if ($('#click1').is(':visible') || $('#click2').is(':visible')) {
$(".droppointercontainer").hide();
}
}
You need to toggle them. For that you can use a variable for each:
var drop1,drop2=false;
$("#click1").on("click", function(){
drop1 ? $(this).children("#droppointercontainer1").fadeOut(200) :
$(this).children("#droppointercontainer1").fadeIn(200);
$("#droppointercontainer2").fadeOut(200);
drop1 = !drop1;
drop2=false;
});
$("#click2").on("click", function(){
drop2 ? $(this).children("#droppointercontainer2").fadeOut(200) :
$(this).children("#droppointercontainer2").fadeIn(200);
$("#droppointercontainer1").fadeOut(200);
drop1=false;
drop2 = !drop2;
});
Is this what you looking for?
$(document).click(function(event) {
$(".droppointercontainer").hide();
if($(event.target).is(".click")) {
$(event.target).find(".droppointercontainer").show();
}
})
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>
To keep things simple, I'd go for a transparent overlay. When you click the overlay, the dropdown disappears. See fiddle here: https://jsfiddle.net/d6yv60od/
$(".click").on("click", function(){
$('body').append('<div class="overlay"></div>');
$(this).children(".droppointercontainer").fadeIn();
});
$('body').on('click', '.overlay', function() {
$(this).remove();
$(".droppointercontainer").fadeOut();
});
One advantage of this solution is that, in its simplicity, the dropdown remains open when you click on an iten. Unless you tell him to close of course, but this is another story :)

When the mouse hovers over an element I want to display a small snippet of text for example "Get Info"

So I have my button below, styled with CSS, and already declared as div in the html file. When the mouse hovers over it, I want to display a small snippet of text, e.g. "Get Info".
I tried selector #GetInfo :hover { but it changed all the style and position of my button.
How can I achieve this?
#GetInfo{
cursor: pointer;
width: 33.2px;
height: 33.2px;
display: inine-block;
z-index:1;
position: absolute;
background-color: rgba(219 ,63,63,.5);
text-align: center;
font-size:23px;
color: white;
top:19px;
right:19px;
}
Is that what you want?
#getInfo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#getInfo .yourTooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
#getInfo .yourTooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#getInfo:hover .yourTooltip {
visibility: visible;
opacity: 1;
}
<html>
<body>
<h1>Pass your mouse over the text below</h1>
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span>
</div>
</body>
</html>
There is a title attribute to almost every HTML element. It shows a text while you hover over the element. Try this:
<input type="button" value="Button" title="I wonder what this red button do ..." />

progress bar with reference line using css and html

I am trying to achieve a similar UI as shown in the image link: https://goo.gl/photos/4dNFyq8a3nESQj2g9 .
It is not a normal progress bar. I need to add a reference data line, the name for reference line (in the picture it is "TODAY") and the text inside the progress bar. Could anyone help me with this? I only can find a normal progress bar and I fails to add the reference data line & reference line text to it :(
I have my progress bar working, but I do not know how to add reference line and reference text.
#progress {
width: 500px;
border: 1px solid black;
position: relative;
background-color: rgba(0,0,0,0.1);
}
#percent {
position: absolute;
left: 10px;
color: white;
}
#bar {
height: 20px;
background-color: green;
width: 30%;
padding: 0px;
margin: 0px
}
<div id="progress">
<span id="percent">30%</span>
<div id="bar"></div>
</div>
.progress {
width: 400px;
}
.progress header span {
color: #666;
float: right;
}
.progress .bar {
position: relative;
background-color: #ccc;
}
.progress .bar .percent {
color: white;
background-color: #0c0;
width: 70%;
}
.progress .bar .ref {
position: absolute;
left: 80%;
top: 0;
width: 1px;
height: 100%;
background-color: black;
}
.progress .bar .ref:before {
content: attr(data-ref);
position: absolute;
width: 100px;
left: -50px;
top: 100%;
color: #888;
text-align: center;
}
<div class="progress">
<header><b>April 2015</b><span>$350 Left</span></header>
<div class="bar">
<div class="percent">$950 of $1,300</div>
<div class="ref" data-ref="TODAY"></div>
</div>
</div>

Categories