如何在元素下方创建弹出窗口 [英] How to create popup beneath element
本文介绍了如何在元素下方创建弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何在点击的元素下方创建一个弹出窗口.
我找到了一个 w3 学校网站，它显示了我想要的内容(
<头><meta name="viewport" content="width=device-width, initial-scale=1"><风格>/* 弹出容器 - 可以是任何你想要的 */.弹出 {位置:相对；显示:内联块；光标:指针；-webkit-user-select:无；-moz-user-select:无；-ms-user-select:无；用户选择:无；}/* 实际弹出窗口 */.popup .popuptext {可见性:隐藏；宽度:160px；背景色:#555；颜色:#fff;文本对齐:居中；边框半径:6px；填充:8px 0;位置:绝对；z-索引:1；底部:125%；左:50%；左边距:-80px；}/* 弹出箭头 */.popup .popuptext::after {内容: "";位置:绝对；顶部:100%；左:50%；左边距:-5px；边框宽度:5px；边框样式:实心；边框颜色:#555 透明透明透明；}/* 切换这个类 - 隐藏和显示弹出窗口 */.popup .show {可见性:可见；-webkit-animation:fadeIn 1s;动画:淡入 1 秒；}/* 添加动画(在弹出窗口中淡出)*/@-webkit-keyframes 淡入{来自{不透明度:0;}{不透明度:1;}}@关键帧淡入{来自{不透明度:0;}到{不透明度:1;}}</风格><body style="text-align:center"><h2>弹出窗口</h2><div class="popup" onclick="myFunction()">点击我切换弹出窗口！<span class="popuptext" id="myPopup">一个简单的弹出窗口！</span><脚本>//当用户点击div时，打开弹窗函数 myFunction() {var popup = document.getElementById("myPopup");popup.classList.toggle("show");}</html>
我曾尝试修改上面的代码使其出现在元素下方，但我总是不成功.
解决方案
我编辑了 .popuptext 以更改框的位置和箭头类以使其指向上方.祝你好运.
//当用户点击div时，打开弹窗函数 myFunction() {var popup = document.getElementById("myPopup");popup.classList.toggle("show");}/* 弹出容器 - 可以是任何你想要的 */.弹出 {位置:相对；显示:内联块；光标:指针；-webkit-user-select:无；-moz-user-select:无；-ms-user-select:无；用户选择:无；颜色:#555；}/* 实际弹出窗口 */.popup .popuptext {可见性:隐藏；宽度:160px；背景色:#555；颜色:#fff;文本对齐:居中；边框半径:6px；填充:8px 0;位置:绝对；z-索引:1；底部:-225%；/* 新的位置 */左:50%；左边距:-80px；}/* 弹出箭头 *//*.popup .popuptext::after {内容: "";位置:绝对；顶部:100%；左:50%；左边距:-5px；边框宽度:5px；边框样式:实心；边框颜色:#555 透明透明透明；}*//* 新箭头 */.popup .popuptext::after {内容: "";位置:绝对；顶部:-5px；左:50%；左边距:-5px；宽度:0；高度:0；左边框:5px 实心透明；border-right: 5px 实心透明；边框底部:5px 实心 #555；}/* 切换这个类 - 隐藏和显示弹出窗口 */.popup .show {可见性:可见；-webkit-animation:fadeIn 1s;动画:淡入 1 秒；}/* 添加动画(在弹出窗口中淡出)*/@-webkit-keyframes 淡入{从 {不透明度:0；}到 {不透明度:1；}}@关键帧淡入{从 {不透明度:0；}到 {不透明度:1；}}<h2>弹出窗口</h2><div class="popup" onclick="myFunction()">点击我切换弹出窗口！<span class="popuptext" id="myPopup">一个简单的弹出窗口！</span>I would like to know how to create a popup beneath an element clicked.
I found a w3 schools site that shows exactly what i want (
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
I have tried modifing the above code to make it appear below the element, but I would always be unsuccessful.
解决方案
I edited the .popuptext to change position of the box and the arrow class to make it point up. Good luck.
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #555;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -225%; /* NEW POSITION */
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
/*
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
*/
/* NEW ARROW */
.popup .popuptext::after {
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #555;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
这篇关于如何在元素下方创建弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
