css web页面实现一个弹窗
div 基本层级：
<div class="pc-invest-join-container">
<div class="bg-wrap">
<div class="place-hold"></div>
<div class="top-container">
<div class="btn-con" @click="openHandle()">点击申请 </div>
</div>
<div class="bot-container">
<div class="btn-con" @click="openHandle()"> 点击申请 </div>
</div>
<!-- 弹窗 -->
<div class="pc-join-modal-container" v-if="isDlgShow">
<div class="dialog-wrapper">
</div>
</div>
</div>
</div>
代码结构如下：
DOM 层级：
页面效果：
完整代码：
<template>
<section>
<div class="pc-invest-join-container">
<div class="bg-wrap">
<div class="place-hold"></div>
<div class="top-container">
<div class="btn-con" @click="openHandle()">点击申请 </div>
</div>
<div class="bot-container">
<div class="btn-con" @click="openHandle()"> 点击申请 </div>
</div>
<div class="pc-join-modal-container" v-if="isDlgShow">
<div class="dialog-wrapper">
<div class="main-content">
<div class="close-btn" @click="closeHandle()">
<img src="/static/picture/pc/modal_close.png" alt />
</div>
<div class="title-content">
<p class="title-text">请填写信息</p>
</div>
<div class="form-container">
<div class="first-row">
<div class="name-con">
<div class="row-cell">
<span class="flag-con">*</span>
<span class="label-text">姓名</span>
</div>
<div class="input-con">
<el-input v-model="formData.name" clearable maxlength="30" placeholder="请输入姓名"></el-input>
</div>
</div>
<div class="mobile-con">
<div class="row-cell">
<span class="flag-con">*</span>
<span class="label-text">手机号</span>
</div>
<div class="input-con">
<el-input v-model="formData.mobile" placeholder="请输入手机号" maxlength="11"></el-input>
</div>
</div>
</div>
<div class="row-cell">
<span class="flag-con">*</span>
<span class="label-text">兴趣爱好</span>
</div>
<div class="input-con">
<el-input v-model="formData.business" placeholder="请输入兴趣爱好，10字以内" maxlength="10"></el-input>
</div>
<div class="row-cell">
<span class="flag-con">*</span>
<span class="label-text">住址</span>
</div>
<div class="input-con">
<el-cascader separator="" v-model="fieldValue" @change="divisionCodeChange" popper-class="pc-sel-area-cascader" style="width:543px" :options="divisionOptions" :props="props" placeholder="请选择区域"></el-cascader>
</div>
<div class="row-cell">
<div class="remark-title-container">
<span class="label-text">备注</span>
<span class="remark-count">{{remarkLen+'/200'}}</span>
</div>
</div>
<div class="desc-container">
<el-input v-model="formData.remark" type="textarea" clearable placeholder="请输入描述" maxlength="200" :rows="2"></el-input>
</div>
<div class="btn-container">
<el-button class="common-btn submit-btn" type="submit" @click="onSubmit" v-if="formData.name&&formData.mobile&&formData.business&&formData.divisionCode" :loading="submitLoading">提交</el-button>
<el-button class="common-btn disable-btn" type="submit" @click="onSubmit" v-else :loading="submitLoading" :disabled="!formData.name||!formData.mobile||!formData.business||!formData.divisionCode">提交</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { InvestJoinMixins } from '../../mixins/investjoin'
export default {
name: "pcinvestjoin",
mixins: [InvestJoinMixins],
data () {
return {
fieldValue: [],
formData: {
source: 5,
remark: '',
mobile: null,
divisionCode: null
},
submitLoading: false,
showSelAddress: false,
// 自定义 props
props: {
label: 'divisionName',
value: 'divisionCode',
children: 'subDivisionList',
expandTrigger: 'hover',
}
}
},
watch: {
},
created () {
},
mounted () {
},
methods: {
divisionCodeChange () {
this.formData.divisionCode = this.fieldValue[2] ? this.fieldValue[2] : this.fieldValue[1] ? this.fieldValue[1] : this.fieldValue[0]
},
//表单提交
onSubmit () {
let params = {
...this.formData
}
console.log(params);
},
openHandle () {
/** ------------------ 跳出弹窗页面禁止滚动设置开始 ------------------ */
// 出现弹窗时，为body元素添加position:fixed，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。
// 获取原来的scrollTop 并将body的top修改为对应的值
this.prevBodyStyle_scrollTop = document.body.scrollTop || document.documentElement.scrollTop
this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue('top')
document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
// 获取原来body的position 为了解决iOS上光标漂移的问题 将position修改为fixed
this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue('position')
document.body.style.position = 'fixed'
// 为了避免width空值的情况
this.prevBodyStyle_width = window.getComputedStyle(document.body, null).getPropertyValue('width')
document.body.style.width = '100%'
/** ------------------ 跳出弹窗页面禁止滚动设置结束 ------------------ */
// 打开弹窗
this.hideOrShowDlg()
},
closeHandle () {
/** ------------------ 关闭弹窗时移除禁止页面滚动设置开始 ------------------ */
document.body.style.top = this.prevBodyStyle_top || '0px'
document.body.style.position = this.prevBodyStyle_position
document.body.style.width = this.prevBodyStyle_width || '100%'
document.body.scrollTop = document.documentElement.scrollTop = this.prevBodyStyle_scrollTop || 0
/** ------------------ 关闭弹窗时移除禁止页面滚动设置结束 ------------------ */
// 关闭弹窗
this.hideOrShowDlg()
}
},
destroyed () {
}
}
</script>
<style lang="less" scoped>
@minWidth: 1366px;
@maxWidth: 1920px;
.pc-invest-join-container {
max-width: @maxWidth;
width: 100%;
margin: 0 auto;
.bg-wrap {
margin-top: 70px;
width: 100%;
height: 100vh;
position: relative;
// 背景图片设置
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
.place-hold {
width: 100%;
height: 108px;
}
.top-container {
width: 100%;
}
.btn-con {
width: 555px;
height: 59px;
line-height: 59px;
margin: 0 auto;
text-align: center;
border-radius: 5px;
background: linear-gradient(90deg, #5ada40 0%, #eb59c6 100%);
}
.bot-container {
width: 100%;
position: absolute;
bottom: 150px;
}
}
/* --------------------- 弹窗样式 -------------------*/
/* 弹窗容器阴影遮挡层样式 */
.pc-join-modal-container {
position: fixed;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
// 弹窗区域
.dialog-wrapper {
width: 623px;
height: 600px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
.main-content {
width: 623px;
height: 600px;
background: #ffffff;
border-radius: 16px;
position: relative;
.close-btn {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 24px;
right: 24px;
img {
width: 100%;
height: 100%;
}
}
.title-content {
padding-top: 30px;
.title-text {
width: 168px;
height: 33px;
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2c2c2c;
line-height: 33px;
margin: 0 auto;
}
}
.form-container {
height: 497px;
padding: 0 40px 30px;
.row-cell {
padding: 20px 0 3px;
display: -webkit-flex; /* Safari */
display: flex;
align-items: center;
.flag-con {
margin-left: 2px;
display: inling-block;
width: 8px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ee3333;
}
.label-text {
display: inling-block;
margin-left: 2px;
padding-bottom: 3px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.first-row {
overflow: hidden;
.name-con {
width: 261px;
float: left;
}
.mobile-con {
width: 261px;
float: right;
}
}
.input-con {
width: 100%;
height: 52px;
}
.remark-title-container {
overflow: hidden;
width: 100%;
padding: 0 12px;
.remark-count {
float: right;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #b2b2b2;
padding-bottom: 3px;
}
}
.select-area-contaner {
padding: 16px;
background: #f6f7f8;
border-radius: 8px;
cursor: pointer;
display: -webkit-flex; /* Safari */
display: flex;
align-items: center;
justify-content: space-between;
.text-con {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #c8c8c8;
}
.icon-con {
width: 14px;
height: 14px;
img {
width: 100%;
height: 100%;
}
}
}
/deep/.el-input {
height: 52px;
background: #f6f7f8;
border-radius: 8px;
}
/deep/.el-input__inner {
height: 52px;
border-radius: 8px;
border: #28beca 0px solid;
background: #f6f7f8;
font-size: 14px;
font-weight: 400;
color: #2c2c2c;
font-family: PingFangSC-Regular, PingFang SC;
// 设置输入时光标颜色
caret-color: #28beca;
}
/deep/.el-input__inner:focus {
// el-input输入时设置边框颜色
border: #4e5ef1 0.5px solid;
}
/deep/.el-input .el-icon-arrow-down {
// el-cascader 展开/折叠图标样式设置
margin-top: 19px;
margin-right: 16px;
width: 14px;
height: 14px;
content: url('/static/picture/pc/icon_arrow_down.png');
}
/deep/ input::-webkit-input-placeholder {
-webkit-text-fill-color: red;
}
/deep/ input::-moz-input-placeholder {
-webkit-text-fill-color: red;
}
/deep/ input::-ms-input-placeholder {
-webkit-text-fill-color: red;
}
/***修改：在element UI文档上找到默认的清空按钮，
然后找到默认按钮的content属性，
直接替换content的值就可以*
**/
/deep/ .el-input.el-input__suffix {
.el-input__suffix-inner {
border-color: none;
.el-icon-circle-close:before {
content: '\e79d' !important;
font-size: 18px;
}
}
}
/deep/ textarea::-webkit-input-placeholder {
-webkit-text-fill-color: #da3dc5;
}
/deep/ textarea::-moz-input-placeholder {
-webkit-text-fill-color: #da3dc5;
}
/deep/ textarea::-ms-input-placeholder {
-webkit-text-fill-color: #da3dc5;
}
.desc-container {
margin-bottom: 28px;
/deep/.el-textarea {
height: 81px;
background: #f6f7f8;
border-radius: 8px;
}
/deep/.el-textarea__inner {
height: 81px;
padding: 16px;
border: none;
border-radius: 8px;
resize: none;
background: #f6f7f8;
// 设置光标颜色
caret-color: #44c6cc;
}
/deep/.el-textarea__inner:focus {
border-color: #44c6cc;
}
}
}
.btn-container {
text-align: center;
.common-btn {
width: 100%;
height: 60px;
border-radius: 8px;
font-size: 18px;
font-weight: 400;
color: #ffffff;
font-family: PingFangSC-Regular, PingFang SC;
}
.submit-btn {
background: linear-gradient(90deg, #5862ec 0%, #cee73e 100%);
}
.disable-btn {
opacity: 0.4;
background: linear-gradient(90deg, #5862ec 0%, #cee73e 100%);
}
}
}
}
}
}
</style>
<style lang="less">
.pc-sel-area-cascader {
// 选择面板样式
.el-cascader-panel {
width: 543px;
}
.el-cascader-menu__wrap {
// 设置选择器省市区分块面板高度
height: 305px;
}
.el-cascader-menu {
// 省市区分块右边框
border: none;
}
.el-scrollbar__thumb {
// 上下滚动条
display: none;
}
.el-cascader-node {
height: 40px;
}
.el-cascader-node:hover {
// 设置鼠标滑过时文字颜色
color: #4e5ef1;
}
.el-cascader-node__label {
// 设置文字样式
padding: 0 7px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
// 文字选中样式及span背景颜色
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
color: #4e5ef1;
}
.el-icon-check {
// 去掉选中小对勾
display: none;
}
.el-icon-arrow-right {
// 选项去掉右侧小图标
display: none;
}
// 选择器面板边框及圆角设置
border-radius: 12px !important;
border: 1px solid #f6f7f8 !important;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07) !important;
}
.pc-sel-area-cascader[x-placement^='bottom'] {
// 选择器面板与输入框的距离
margin-top: 1px !important;
}
.pc-sel-area-cascader[x-placement^='bottom'] .popper__arrow {
// 输入框下面小三角形
display: none;
}
</style>