要实现手机端浮动弹窗的显示效果，可以借助JS的一些特性来完成。下面是具体的攻略：
1. HTML结构
先搭建好基本的HTML结构，包括页面的顶部和底部，以及一个主要内容区域。其中，顶部和底部可以用固定定位来实现，主要内容区域则需要设定一个合适的高度，使得页面高度能够适配不同的设备屏幕尺寸。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动窗口效果演示</title>
<style>
/* 顶部固定定位 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
z-index: 2;
}
/* 底部固定定位 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
z-index: 2;
}
/* 主要内容区域 */
.content {
height: 1000px;
padding-top: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">浮动窗口效果演示</div>
<div class="content">
<h2>这里是主要内容区域</h2>
</div>
<div class="footer">版权所有 © 2021 浮动窗口效果演示</div>
</body>
</html>
2. JS实现浮动窗口
在页面底部添加一个固定位置的按钮，点击按钮后可以显示一个浮动窗口。具体实现方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动窗口效果演示</title>
<style>
/* 顶部固定定位 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
z-index: 2;
}
/* 底部固定定位 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
z-index: 2;
}
/* 主要内容区域 */
.content {
height: 1000px;
padding-top: 100px;
text-align: center;
}
/* 浮动窗口样式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
z-index: 3;
display: none;
}
/* 遮罩层样式 */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 2;
display: none;
}
</style>
</head>
<body>
<div class="header">浮动窗口效果演示</div>
<div class="content">
<h2>这里是主要内容区域</h2>
</div>
<div class="footer">
<button id="showPopup">点击显示浮动窗口</button>
</div>
<div class="mask"></div>
<div class="popup">
<h2>这里是浮动窗口标题</h2>
<p>这里是浮动窗口内容</p>
<button id="hidePopup">关闭窗口</button>
</div>
<script>
// 获取元素
var showPopupBtn = document.querySelector('#showPopup');
var hidePopupBtn = document.querySelector('#hidePopup');
var mask = document.querySelector('.mask');
var popup = document.querySelector('.popup');
// 点击按钮显示浮动窗口
showPopupBtn.onclick = function() {
mask.style.display = 'block';
popup.style.display = 'block';
};
// 点击关闭按钮关闭浮动窗口
hidePopupBtn.onclick = function() {
mask.style.display = 'none';
popup.style.display = 'none';
};
</script>
</body>
</html>
代码中通过JS获取到四个元素，分别是显示浮动窗口的按钮 #showPopup、关闭浮动窗口的按钮 #hidePopup、遮罩层 .mask、浮动窗口 .popup。然后在点击显示按钮后，设置遮罩层和浮动窗口的 display 属性为 block，使它们显示出来。点击关闭按钮后，再把它们的 display 属性设置为 none，使它们消失不见。
3. 通过监听屏幕滚动事件实现固定显示
如果想要让浮动窗口始终固定在页面的某一个位置上，可以通过监听屏幕滚动事件来实现，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动窗口效果演示</title>
<style>
/* 顶部固定定位 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
z-index: 2;
}
/* 底部固定定位 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
z-index: 2;
}
/* 主要内容区域 */
.content {
height: 1000px;
padding-top: 100px;
text-align: center;
}
/* 浮动窗口样式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
z-index: 3;
display: none;
}
/* 遮罩层样式 */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 2;
display: none;
}
/* 固定样式 */
.fixed {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 1;
display: none;
}
</style>
</head>
<body>
<div class="header">浮动窗口效果演示</div>
<div class="content">
<h2>这里是主要内容区域</h2>
</div>
<div class="footer">
<button id="showPopup">点击显示浮动窗口</button>
</div>
<div class="mask"></div>
<div class="popup">
<h2>这里是浮动窗口标题</h2>
<p>这里是浮动窗口内容</p>
<button id="hidePopup">关闭窗口</button>
</div>
<div class="fixed">
<button id="backToTop">返回顶部</button>
</div>
<script>
// 获取元素
var showPopupBtn = document.querySelector('#showPopup');
var hidePopupBtn = document.querySelector('#hidePopup');
var mask = document.querySelector('.mask');
var popup = document.querySelector('.popup');
var fixedBtn = document.querySelector('.fixed');
var backToTopBtn = document.querySelector('#backToTop');
// 点击按钮显示浮动窗口
showPopupBtn.onclick = function() {
mask.style.display = 'block';
popup.style.display = 'block';
};
// 点击关闭按钮关闭浮动窗口
hidePopupBtn.onclick = function() {
mask.style.display = 'none';
popup.style.display = 'none';
};
// 监听屏幕滚动事件
window.onscroll = function() {
// 如果已经向下滚动一定距离，显示返回顶部按钮
if (document.documentElement.scrollTop > 100) {
fixedBtn.style.display = 'block';
} else {
fixedBtn.style.display = 'none';
}
};
// 点击返回顶部按钮滚动页面到顶部
backToTopBtn.onclick = function() {
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
代码中新增了一个返回顶部的按钮，按钮也是通过监听滚动事件来实现。当用户向下滚动 100 像素时，返回顶部的按钮出现在右下角。点击该按钮后，页面会平滑地滚动到顶部。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现简单易用的手机端浮动窗口显示效果 - Python技术站
微信扫一扫 
支付宝扫一扫 