css 实现简单的页面隐藏与浮现

苏柒258

已于 2024-04-18 17:35:11 修改

阅读量956

点赞数 28

文章标签： css vue.js elementui

于 2024-04-18 16:43:53 首次发布

本文链接：https://blog.csdn.net/weixin_65201086/article/details/137926584

版权

实现点击按钮出现弹框，再点击可消失功能

编译软件：vscode

技术：html+css+js

css中display属性是关键

1.html（内容可以自己变，这里是以vue3的form表单为例）

<el-button type="success" id="openModalBtn" @click="open()" :icon="CirclePlus">添加</el-button>

<div id="myModal" class="TeaFrame">
    <h3 style="margin-top: -80px;">添加茶叶信息</h3>
    <el-form :model="form" label-width="auto" style="max-width: 400px;margin-left: 55px;height: 100px;margin-top: 30px;">
      <el-form-item label="茶叶编号">
        <el-input v-model="form.Number" />
      </el-form-item>
      <el-form-item label="茶叶名称">
        <el-input v-model="form.Name" placeholder=""/>
      </el-form-item>
      <el-form-item label="区域信息">
        <el-input v-model="form.area" type="text" />
      </el-form-item>
      <el-form-item label="茶叶等级">
        <el-input v-model="form.TeaLevel" type="text" />
      </el-form-item>
      <el-form-item label="种植人">
        <el-input v-model="form.People" type="text" />
      </el-form-item>
      <el-form-item label="种植时间" style="width: 790px;">
        <el-col :span="11">
          <el-date-picker
            v-model="form.Time"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item style="margin-left: 150px;margin-top: 50px;">
        <el-button @click="onSubmit">添加</el-button>
        <el-button @click="close">返回</el-button>
      </el-form-item>
    </el-form>

2.css（css设计样式，颜色布局等均可自调）

.TeaFrame{

margin-top:-440px;

display: none; /* 初始时隐藏 */

position: relative;

width: 520px;

height: 300px;

padding-top: 100px;

padding-bottom: 50px;

border-radius: 10px;

margin-left: 440px;

background: #e8f0e5;

z-index: 10;

}

3.JavaScript（只需要写两个function）

// 添加框的隐藏
const open=()=>{
document.getElementById("myModal").style.display = "block";
};
const close =()=>{
document.getElementById("myModal").style.display = "none";
};

4.详情介绍：

实现页面隐藏，点击按钮后页面浮现，再次点击又隐藏，关键属性是display: none; 首先将html的表单代码写好后，设置表单属性（长，宽，高，定位等），调好后，再添加隐藏属性（不然先设置隐藏了你就看不见调成什么样子了），最后给按钮绑定事件，即@click=“方法名称（）”，在<scrip></script>中我们就可以写入方法，触发事件，方法有两种写法1.function 方法名称（）{} 2.const 方法名称 =（）=>{} 在这里我用的是第二种。