CODEWITHSUNDEEP
javascripthtml
Pi Network Crytocurrency
Pi Network Crytocurrency

Reputation: 611

How to show popup dialog box?

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="https://i.sstatic.net/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.

output1

Hope someone can guide me on how to solve it. Thanks.

Upvotes: 3

Views: 1476

Answers (4)

G.W Kalpa Sathjana De Silva
G.W Kalpa Sathjana De Silva

Reputation: 309

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="https://i.sstatic.net/o2hxa.png" onclick="showpopup()"></img>
<div id="tooltiptext" class="bottom tooltip" style="display: none;">
  <div class="arrow">
  </div>
  LMS short explanation
</div>

Upvotes: 1

Anurag Shukla
Anurag Shukla

Reputation: 90





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="https://i.sstatic.net/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.

Upvotes: 0

salman
salman

Reputation: 314

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>

Upvotes: 0

Hyunjune Kim
Hyunjune Kim

Reputation: 485

You need to define the css for pop-ups. position, top, left, z-index, background color, width, height and so on.

Upvotes: 0

Related Questions