css web页面实现一个弹窗

2023-10-27

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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS

前端

css

javascript

css web页面实现一个弹窗的相关文章

尝试将布尔 C# 变量传递给 javascript 变量并将其设置为 true

在我的 aspx 页面中我将布尔变量 C 传递给需要布尔类型的 javascript 函数但遇到了问题但是 C 变量返回 True 而 javascript 不喜欢大写 myjavascript 如果我将 c 变量转换为字符串那么我
如何重置使用 JavaScript 更改的 CSS 属性？

我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了无论选择哪个选项宽度都将继续为 150px 当选择每个选项时它会使其他选
使用模数按字母顺序对列表进行排序

我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题但我很难理解如何使用模数来做到这一点更新这是按我的方式工作的代码但是我更喜欢下面提供的答案的可重用性因此接受了该答案
我想检查 $('#td1').text() === "x" 是否？

我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西但它不起作用添加检查代码后它就停止了我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
如何监听 jQuery AJAX 请求？

以下两种实现 ajaxRequest 1 2 的方法应该是等效的话说回来为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败我应该如何重写测试 3 来监视 2 中的成功回调如果我尝试stub jQuery ajax使用
可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗？

我有这个想法将图片而不是文本的各个部分链接到不同的页面或网站并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成这样看起来就像是一张完整的图片这里有人知道如何使用 JavaScript 的变体例如 jQuery 或纯 J
除了更改标题之外，如何在 Firefox 中强制另存为对话框？

有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框我无法更改标题如果您可以将文件以 Base64 格式输出到客户端则可以使用 data uri 进行下载 location href
使用 KnockoutJs 映射插件进行递归模板化

我正在尝试使用以下方法在树上进行递归模板化ko映射插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它除非我定义separate每个级别的模板在以下情况下
跟踪用户何时点击浏览器上的后退按钮

是否可以检测用户何时单击浏览器的后退按钮我有一个 Ajax 应用程序如果我可以检测到用户何时单击后退按钮我可以显示适当的数据任何使用 PHP JavaScript 的解决方案都是优选的任何语言的解决方案都可以只需要我可以翻译成
如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏？

我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站我创建了一个始终位于页面顶部的导航栏组件并且我正在使用页面锚点导航 id 请注意我还没有创建路由模块到目前为止还没有必要这样做导航栏代码如下
通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块？

我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块我知道我做错了什么但我被困住了有任何想法吗
如何在没有@import的情况下减少@import？

我用的较少从 Google PageSpeed 我了解到使用 importCSS 文件中的内容会影响网站速度所以我想排除任何 import来自我的 CSS 的东西我有 2 个不同的样式表reset css and rebuild c
如何在类似控制台的环境中运行 JavaScript？

我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
指针事件：无，过滤，适用于 ie8 和任何地方，不适用于 ie9

正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
Javascript 纪元时间（以天为单位）

我需要以天为单位的纪元时间迄今为止我已经看到过有关如何翻译它的帖子但几天后就没有了我对纪元时间很不好我怎么能得到这个我需要以天为单位的纪元时间我将解释为您想要自纪元以来的天数纪元本身是第 0 天或第 1 天的开始无论您如
如何仅在最后一个
处给出透明六边形角度？

我必须制作这样的菜单替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
将 MQTTNet 服务器与 MQTT.js 客户端结合使用

我已经启动了一个 MQTT 服务器就像this https github com chkr1011 MQTTnet tree master例子该代码托管在 ASP Net Core 2 0 应用程序中但我尝试过控制台应用程序但没有成
使用

css web页面实现一个弹窗

css web页面实现一个弹窗 的相关文章

css web页面实现一个弹窗的相关文章