css web页面实现一个弹窗

＊且听风吟

已于 2023-03-30 18:27:01 修改

阅读量3.5k

点赞数 3

分类专栏： # CSS 文章标签：前端 css javascript

于 2022-07-13 10:29:38 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/125726829

版权

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<