如何显示弹出对话框？
[英]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="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.谢谢。
4 个解决方案
解决方案1
1 已采纳 2020-12-04 05:07:50
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>
解决方案2
0 2020-12-04 03:33:59
You need to define the css for pop-ups.您需要为弹出窗口定义 css。 position, top, left, z-index, background color, width, height and so on. position，top，left，z-index，背景颜色，宽度，高度等等。
解决方案3
0 2020-12-04 03:36:30
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>
解决方案4
0 2020-12-04 04:15:00
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.您必须将所有 html 包含在一个 div 中，并更改相对于它的位置。 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.如果有人可以更正它，请使上面的代码段正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.