css 布局学习之底部弹窗切换示
分享下个人平时练习前端的代码。支付h5和pc端，直接上代码看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<title>底部弹窗切换示例</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
overflow: hidden; /* 禁用默认滚动 */
}
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #ccc;
position: relative;
}
.nav {
width: 100%;
height: 50px;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
}
.main {
width: 100%;
flex: 1;
background-color: #0f0;
display: flex;
flex-direction: column;
overflow-y: auto; /* 允许垂直滚动 */
padding: 10px;
}
.tab {
width: 100%;
height: 50px;
background-color: #00f;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
cursor: pointer;
}
.item {
height: 100px;
background-color: rgba(255, 255, 255, 0.8);
margin: 5px 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.modal {
display: none; /* 默认隐藏弹窗 */
width: 100%;
background-color: white;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* 边框阴影效果 */
padding: 20px;
transition: transform 0.3s ease; /* 添加过渡效果 */
}
.modal.active {
display: block; /* 显示弹窗 */
}
.main.active {
/*transform: translateY(-100px); !* 向上移动主内容 *!*/
/*padding-bottom: 100px;*/
}
.modal-header, .modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header {
font-weight: bold;
}
.close-button {
cursor: pointer;
color: #f00;
}
</style>
</head>
<body>
<div id="app" class="content">
<div class="nav">导航栏</div>
<div class="main" ref="mainContent">
<div class="item">内容 1</div>
<div class="item">内容 2</div>
<div class="item">内容 3</div>
<div class="item">内容 4</div>
<div class="item">内容 5</div>
<div class="item">内容 6</div>
<div class="item">内容 7</div>
<div class="item">内容 8</div>
<div class="item">内容 9</div>
<div class="item">内容 10</div>
<div class="item">内容 11</div>
<div class="item">内容 12</div>
<div class="item">内容 13</div>
<div class="item">内容 14</div>
<div class="item">内容 15</div>
<div class="item">内容 16</div>
<div class="item">内容 17</div>
<div class="item">内容 18</div>
<div class="item">内容 19</div>
<div class="item">内容 20</div>
<div class="item">内容 21</div>
<div class="item">内容 22</div>
<div class="item">内容 23</div>
<div class="item">内容 24</div>
<div class="item">内容 25</div>
<div class="item">内容 26</div>
<div class="item">内容 27</div>
<div class="item">内容 28</div>
<div class="item">内容 29</div>
<div class="item">内容 30</div>
</div>
<div class="tab" @click="toggleModal">底部栏</div>
<!-- 弹窗 -->
<div class="modal" :class="{ active: showModal }">
<div class="modal-header">
<span>弹窗标题</span>
<span class="close-button" @click="toggleModal">关闭</span>
</div>
<div class="modal-body">
<p>这是底部弹窗的内容。</p>
</div>
<div class="modal-footer">
<button @click="toggleModal">确认</button>
</div>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const showModal = ref(false); // 控制弹窗显示状态
const mainContent = ref(null); // 引用 main 内容区域
const toggleModal = () => {
showModal.value = !showModal.value; // 切换弹窗显示状态
// 在弹窗打开时滚动到最底部
if (showModal.value && mainContent.value) {
mainContent.value.scrollTop = mainContent.value.scrollHeight;
}
};
return { showModal, mainContent, toggleModal };
}
}).mount('#app');
</script>
</body>
</html>
原文地址：https://blog.csdn.net/m0_69254007/article/details/143834904
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！