在网页开发中，弹窗是提升用户交互体验的常用组件，而让弹窗适配不同尺寸的设备屏幕是响应式设计的重要部分。结合CSS的position属性和媒体查询，可以轻松实现适配多端的响应式弹窗，无需依赖复杂的JavaScript逻辑。
核心原理说明
position属性的作用
position属性用于设置元素的定位方式，实现响应式弹窗时常用以下取值：
- fixed：相对于浏览器视口定位，弹窗会始终停留在屏幕的固定位置，不受页面滚动影响，适合全局提示类弹窗。
- absolute：相对于最近的非static定位的父元素定位，适合嵌套在特定容器内的弹窗。
- relative：相对于元素自身原有位置定位，一般作为弹窗父容器的定位属性，为absolute定位的子元素提供参照。
媒体查询的作用
媒体查询可以根据设备的屏幕尺寸、分辨率等特征应用不同的CSS样式，通过设定不同的断点，在不同屏幕宽度下调整弹窗的宽度、位置、内边距等属性，实现响应式效果。
实现步骤
1. 构建弹窗基础结构
首先编写弹窗的HTML结构，包含遮罩层和弹窗内容容器：
<div class="modal-overlay" id="modalOverlay">
<div class="modal-container">
<div class="modal-header">
<h3>提示信息</h3>
<span class="modal-close" id="modalClose">×</span>
</div>
<div class="modal-body">
<p>这是一段弹窗内容，用于展示相关信息。</p>
</div>
<div class="modal-footer">
<button class="btn-confirm">确认</button>
<button class="btn-cancel">取消</button>
</div>
</div>
</div>
2. 编写基础CSS样式
先定义弹窗的默认样式，使用position: fixed实现弹窗居中定位，遮罩层覆盖整个视口：
/* 遮罩层样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none; /* 默认隐藏 */
justify-content: center;
align-items: center;
z-index: 1000;
}
/* 弹窗容器样式 */
.modal-container {
position: relative;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 500px; /* 默认宽度 */
max-height: 80vh;
overflow-y: auto;
}
/* 弹窗头部样式 */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid #e8e8e8;
}
.modal-header h3 {
margin: 0;
font-size: 18px;
}
.modal-close {
cursor: pointer;
font-size: 20px;
color: #999;
}
.modal-close:hover {
color: #333;
}
/* 弹窗主体样式 */
.modal-body {
padding: 24px;
font-size: 14px;
line-height: 1.5;
}
/* 弹窗底部样式 */
.modal-footer {
padding: 16px 24px;
border-top: 1px solid #e8e8e8;
text-align: right;
}
.modal-footer button {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
margin-left: 8px;
}
.btn-confirm {
background-color: #1890ff;
color: #fff;
}
.btn-cancel {
background-color: #f5f5f5;
color: #333;
}
3. 添加媒体查询实现响应式
通过媒体查询设置不同屏幕宽度下的弹窗样式，适配移动端和窄屏设备：
/* 屏幕宽度小于等于768px时（平板竖屏、手机） */
@media screen and (max-width: 768px) {
.modal-container {
width: 90%; /* 弹窗宽度占屏幕90% */
max-width: none; /* 取消最大宽度限制 */
margin: 0 16px; /* 左右留16px边距 */
border-radius: 6px;
}
.modal-header {
padding: 12px 16px;
}
.modal-header h3 {
font-size: 16px;
}
.modal-body {
padding: 16px;
font-size: 13px;
}
.modal-footer {
padding: 12px 16px;
}
.modal-footer button {
padding: 6px 12px;
font-size: 13px;
}
}
/* 屏幕宽度小于等于480px时（小屏手机） */
@media screen and (max-width: 480px) {
.modal-container {
width: 95%; /* 进一步增大弹窗占比 */
margin: 0 8px;
}
.modal-body {
padding: 12px;
}
.modal-footer button {
width: 100%; /* 按钮占满宽度 */
margin: 4px 0;
}
}
4. 添加简单交互逻辑
使用少量JavaScript控制弹窗的显示和隐藏，这里仅提供基础逻辑：
// 获取DOM元素
const modalOverlay = document.getElementById('modalOverlay');
const modalClose = document.getElementById('modalClose');
const btnConfirm = document.querySelector('.btn-confirm');
const btnCancel = document.querySelector('.btn-cancel');
// 显示弹窗（实际项目中可根据触发条件调用）
function showModal() {
modalOverlay.style.display = 'flex';
}
// 隐藏弹窗
function hideModal() {
modalOverlay.style.display = 'none';
}
// 绑定关闭事件
modalClose.addEventListener('click', hideModal);
btnConfirm.addEventListener('click', hideModal);
btnCancel.addEventListener('click', hideModal);
// 点击遮罩层也关闭弹窗
modalOverlay.addEventListener('click', function(e) {
if (e.target === modalOverlay) {
hideModal();
}
});
// 页面加载后3秒自动显示弹窗（仅示例用）
window.addEventListener('load', function() {
setTimeout(showModal, 3000);
});
效果说明
上述实现中，弹窗默认在PC端宽度为500px，居中显示在屏幕中。当屏幕宽度小于等于768px时，弹窗宽度会调整为屏幕宽度的90%，同时缩小内边距适配平板和手机。当屏幕宽度小于等于480px时，弹窗宽度进一步调整为95%，底部的按钮会变为上下排列占满宽度，避免按钮在小屏上挤压变形。
如果需要调整不同断点的样式，只需要修改媒体查询中的max-width值和对应的CSS属性即可，position属性保证了弹窗始终相对于视口居中，不会因为页面滚动出现定位偏差。