如何显示弹出窗口对话框？

Question

如何显示弹出窗口对话框？

3

我在创建一个小型对话框时遇到了问题，当我点击图片时它不会弹出来。现在我的弹出内容只会显示在图片下方。以下是我的代码：

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>

实际上，我希望结果像图片下方所示，弹出内容可以显示在小对话框中。

希望有人能指导我如何解决它。谢谢。

- Pi Network Crytocurrency

4个回答

0

你需要定义弹出框的CSS。包括位置、上边距、左边距、Z轴顺序、背景颜色、宽度、高度等等。

- Hyunjune Kim

谢谢您的评论。您能否根据我的编码给我展示一个样例？ - Pi Network Crytocurrency

它们通常被称为“模态框”和“工具提示”，你可以自己编写代码，也可以从互联网上找到现成的，只需要谷歌一下即可。 - tsamridh86

请查看此处链接：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal - Hyunjune Kim

0

你可以跟随这个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>

- salman

我的需求是点击后显示对话框内容，不能使用鼠标悬停来显示内容。 - Pi Network Crytocurrency

你可以使用相同的逻辑，只需删除悬停CSS并添加您的点击逻辑。 - salman

0

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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>

我在代码片段编辑器上遇到了问题，所以无法正确地发布它。但是，这里有关于你的代码的codepen。

你必须将所有的HTML内容包含在一个div中，并将其相对位置更改。对于弹出窗口，你必须使用边框、边距、背景等样式进行设置。

如果有人能够纠正它，请让上面的代码片段正常工作。

- Anurag Shukla

不要将HTML、CSS和JS混在一起写。在代码片段编辑器中有不同的位置可以编写它们。 - Shounak Das

- G.W Kalpa Sathjana De Silva · Accepted Answer

请参考以下内容：

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>