如何顯示彈出對話框？
[英]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.