如何显示弹出对话框？
[英]How to show popup dialog box?
问题描述
我在创建一个小对话框以在我单击图片时显示时遇到问题。 现在我的弹出内容只显示在图片下方。 下面是我的编码：
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>
其实，我想要的结果如下图，弹出的内容可以显示在小对话框中。
希望有人能指导我如何解决它。 谢谢。
4 个解决方案
解决方案1
1 已采纳 2020-12-04 05:07:50
参考这个：
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
您需要为弹出窗口定义 css。 position，top，left，z-index，背景颜色，宽度，高度等等。
解决方案3
0 2020-12-04 03:36:30
你可以点击这个链接
<!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>
我在使用片段编辑器时遇到问题，因此无法正确发布。 但是，这是关于您的代码的代码笔。
您必须将所有 html 包含在一个 div 中，并更改相对于它的位置。 对于弹出窗口，您必须使用边框、边距、背景等设置样式。
如果有人可以更正它，请使上面的代码段正常工作。
如何在页面加载中弹出对话框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.