How to show popup dialog box?

user_14161044 0
Viewed 325

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.

output1

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

html javascript
4 Answers

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>

user_113273020

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

user_128439420

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




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.

user_139916020
Related