javascript - 无法显示 JavaScript 弹出窗口
问题描述
我正在尝试使用 JavaScript 显示一个弹出窗口,但是,带有 class="popup" 的 div 是当前唯一显示的内容。当用户执行操作时,popup 和 popup2 都应该显示。我不确定我做错了什么。
HTML:
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2">
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
JavaScript:
$(() => {
$('#enter').on('keypress', function(e) {
if (e.keyCode == 13) {
const newTask = $(this).val();
if (newTask) {
上面这段javascript可以忽略
var popup = document.getElementById("popup");
popup.classList.toggle("show");
var popup2 = document.getElementById("popup2");
popup2.classList.toggle("show");
}
}
});
});
CSS:
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popuptext {
visibility: hidden;
width: 160px;
height: 200px;
background-color: #131313;
color: #fff;
opacity: 0.95;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
left: 581px;
top: 180px;
margin-left: -80px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
#popup2 {
visibility: hidden;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
top: 50px;
left: 50px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#popup2 .show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
解决方案
您的 HTML 代码无效。
改变这个
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2"></div>
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
对此
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2">
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
推荐阅读
- android - 将数据从 Recycler View Adapter 发送到 BroadcastReciever
- laravel - Laravel 数据库队列频率
- java - 未使用的类未打包在 Maven 多模块项目中
- javascript - React i18next - 从 API 获取语言首选项并根据获取的首选项初始化 i18n
- typescript - 在函数类型中使用泛型
- python - Pandas将行与列值合并在一个范围内
- python - 如何将字典转换为 CSV 文件?
- java - 在与 java 中的字段相同的类中添加自定义列表对象的可能现实原因?
- react-native - 执行“detox test”命令时,iOS 模拟器应用程序无法启动 #2305
- ansible - “Ansible lineinfile 添加重复行”的变体