这里给您详细讲解一下 JS 控制弹出悬浮窗口的实例代码的攻略。下面是具体步骤:
这里给您详细讲解一下 JS 控制弹出悬浮窗口的实例代码的攻略。下面是具体步骤:
1. 给HTML添加悬浮窗口基本元素
首先,在 HTML 文档中添加弹出悬浮窗口的基本元素,包括触发弹出的按钮和整个弹出窗口的框架结构。代码示例如下:
<button id="open-popup">点击打开弹出窗口</button>
<div id="popup-container">
<div id="popup">
<h2>这是弹出窗口的标题</h2>
<p>这里是弹出窗口的内容。</p>
<button id="close-popup">关闭</button>
</div>
</div>
2. 添加CSS样式
为了美化弹出窗口并实现隐藏功能,需要添加一些CSS样式。具体代码如下:
#popup-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popup {
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
#popup h2 {
margin-top: 0;
}
#close-popup {
position: absolute;
top: 10px;
right: 10px;
}
3. 使用JavaScript控制悬浮窗口的显示和隐藏
接下来,需要使用JavaScript来控制弹出窗口的显示和隐藏。具体代码如下:
// 获取弹出窗口元素和关闭按钮元素
var popupContainer = document.getElementById('popup-container');
var popup = document.getElementById('popup');
var closePopup = document.getElementById('close-popup');
// 点击按钮打开弹出窗口
document.getElementById('open-popup').addEventListener('click', function() {
popupContainer.style.display = 'block';
});
// 点击关闭按钮关闭弹出窗口
closePopup.addEventListener('click', function() {
popupContainer.style.display = 'none';
});
// 点击背景关闭弹出窗口
popupContainer.addEventListener('click', function(e) {
if (e.target === this) {
popupContainer.style.display = 'none';
}
});
以上就是JS控制弹出悬浮窗口的实例代码的完整攻略。
下面还给您两个示例说明:
1. 当鼠标放置在按钮上时弹出悬浮窗口
需求:当鼠标放置在按钮上时弹出悬浮窗口。
解决办法:将“打开弹出窗口”的触发事件修改为“鼠标移入”事件。代码如下:
var popupContainer = document.getElementById('popup-container');
document.getElementById('open-popup').addEventListener('mouseover', function() {
popupContainer.style.display = 'block';
});
// 点击关闭按钮关闭弹出窗口
document.getElementById('close-popup').addEventListener('click', function() {
popupContainer.style.display = 'none';
});
// 点击背景关闭弹出窗口
popupContainer.addEventListener('click', function(e) {
if (e.target === this) {
popupContainer.style.display = 'none';
}
});
2. 点击其他区域关闭悬浮窗口
需求:点击页面的其他区域时关闭弹出窗口。
解决办法:在弹出窗口的背景层上绑定点击事件,如果鼠标点击的是背景层本身,则关闭弹出窗口。代码如下:
var popupContainer = document.getElementById('popup-container');
document.getElementById('open-popup').addEventListener('click', function() {
popupContainer.style.display = 'block';
});
// 点击关闭按钮关闭弹出窗口
document.getElementById('close-popup').addEventListener('click', function() {
popupContainer.style.display = 'none';
});
// 点击背景关闭弹出窗口
popupContainer.addEventListener('click', function(e) {
if (e.target === this) {
popupContainer.style.display = 'none';
}
});
// 点击页面其他区域也要关闭弹出窗口
document.addEventListener('click', function(e) {
if (!document.getElementById('popup-container').contains(e.target) && e.target !== document.getElementById('open-popup')) {
document.getElementById('popup-container').style.display = 'none';
}
});
沃梦达教程
本文标题为:JS控制弹出悬浮窗口(一览画面)的实例代码
基础教程推荐
猜你喜欢
- Ajax简单的异步交互及Ajax原生编写 2022-12-15
- 用js读写cookie的简单方法(推荐) 2024-02-05
- html5实现移动端适配完美写法 2022-09-16
- 清除css浮动的三种方法小结 2024-01-19
- 浅谈CSS中浮动float带来的高度塌陷问题及4种解决方案 2023-12-20
- vue开发之生命周期 2023-10-08
- 页面定时刷新(1秒刷新一次) 2024-01-08
- 微信小程序 页面跳转和数据传递实例详解 2024-01-05
- 解决CSS中子元素z-index与父元素兄弟节点的层级问题 2024-01-19
- 从gb到utf-8 2022-11-04