【web实现右侧弹窗】JS+CSS如何实现右侧缓慢弹窗动态效果『附完整源码下载』


文章目录

  • 写在前面
  • 涉及知识点
  • 页面效果
  • 1、页面DOM创建
    • 1.1创建底层操作dom节点
    • 1.2 创建存放弹窗dom节点
  • 2、页面联动功能实现(关闭与弹出)
    • 2.1 点击非右侧区域实现关闭
    • 2.2 点击叉叉及关闭按钮实现关闭功能
  • 3、完整源码包下载
    • 3.1百度网盘
    • 3.2 123云盘
    • 3.3邮箱留言
  • 总结


写在前面

已经一个月没有更新博文了,过了个国庆公司也忙了,后面尽量控制更新频率,其实之前我写过一个类似的文章,但是还是觉得当时做的不完善,还有漏洞,因此也是晚上抽个时间做了一个总结。
其实以前我们一直用的是layui做的弹窗,但是关闭操作总是很冗余,待会我可以给大家示范一下差距,因此后续的开发为了更加的人性化,我决定将后续开发统一调整成右侧弹出的形式。当然产品是在不断的打磨中才能更加健壮。

涉及知识点

CSS实现右侧弹出效果,JS如何实现右侧弹出效果,手把手教你优化右侧弹出页面效果,前端实现右侧弹窗,如何实现web右侧弹窗效果,CSS实现自定义弹窗效果。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

页面效果

其实这个就是为了让更多的人能够选择性是否继续阅读这篇文章,为大家精准定位自己想要的demo,文尾有完整代码包下载链接。
在这里插入图片描述

1、页面DOM创建

首先我是创建了一个大的dom元素,主要存放操作页面和弹窗页面,采用的都是相对布局。完整核心html代码如下:

<div class="totalBox"><div class="layerpage"><h2>当前页面为父页面</h2><p>关注CSDN博主 -《拄杖盲学轻声码》,一个喜欢分享源码的博主,希望得到大家的支持</p><button onclick="loadStatusList()">点击弹窗</button></div><div id="hola_LayuiCommon"></div>
</div>

1.1创建底层操作dom节点

其实就是一个div里面写了一些描述,核心在于按钮,在按钮上添加onclick事件,该节点主要是为了能够触发弹窗,也就是触发页面,如下所示:
在这里插入图片描述

1.2 创建存放弹窗dom节点

首先我们是将右侧弹窗存放在一个dom里面,然后自己在该dom里面画一个div,大小设置宽40%,高100%,位置设置偏右。然后针对父节点设置一个背景透明就可以,如下所示的页面:
在这里插入图片描述

其实看到这里大家就结构清晰了不少,一目了然。接下来的就是它的便捷性关闭联动操作及样式的设置,大家别慌哈,文尾有源码包的分享,也可以自己留邮箱哈。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

2、页面联动功能实现(关闭与弹出)

2.1 点击非右侧区域实现关闭

其实这个是我觉得全篇最实用的地方,不像其他传统的弹窗一样,总是要找到叉叉按钮或者关闭按钮才能去做关闭的操作。
首先实现方法还是基于bind(“click”)事件的,我们记住一点,就是点击的时候如果鼠标点击的dom区域是元素体本身,那么就直接返回,否则的话就执行关闭弹窗方法,说太多不如直接上实现源码,大家可以试一下哈,博主亲测有效:

$('.layuiCommon').bind('click', function (event) {debugger;event.stopPropagation();// IE支持 event.srcElement , FF支持 event.targetvar evt = event.srcElement ? event.srcElement : event.target;if (evt.className != 'layuiCommon') {return; // 如果是元素本身,则返回} else {debugger;hideLayuiCommon(); // 如不是则隐藏元素}
});

这个里面的hideLayuiCommon()函数是公共关闭函数,实现核心就是清空遮罩元素,另外右侧隐藏增加一个动效,源码如下所示:

function hideLayuiCommon() {$(".layuiLeftwhite").css({"background": "rgba(255,255,255,1)","animation": "slide-out 0.5s forwards"});$("#hola_LayuiCommon").css({"width": "0%","height": "0%","z-index": 9999999}).html("");
}

2.2 点击叉叉及关闭按钮实现关闭功能

其实上面2.1我把关闭的方法和大家说了一下,后面就是在叉叉和关闭按钮上添加onclick事件,该事件的执行函数就是hideLayuiCommon()公共函数。
到这里整体实现过程和方法也和大家说了一下,希望能给您带来帮助,喜欢的话可以给个小心心哟!!!
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

3、完整源码包下载

3.1百度网盘

链接:https://pan.baidu.com/s/1ZTSok3NT906IPeANBi31KQ
提取码:hdd6

3.2 123云盘

链接:https://www.123pan.com/s/ZxkUVv-KDI4.html
提取码:hdd6

3.3邮箱留言

评论区留下您的邮箱账号,博主看到第一时间发给您,祝您生活愉快!


总结

以上就是今天要讲的内容,本文主要介绍了基于JS+CSS实现右侧弹窗的页面效果应用也期待大家一起进步哈,2023年一起加油!!!

版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

按键中断小灯蜂鸣器风扇

按键1实现小灯亮灭&#xff0c;按键2实现蜂鸣器&#xff0c;安静3实现风扇 src/key_it.c #include"key_it.h"void key3_it_config() {//RCC使能GPIOF时钟RCC->MP_AHB4ENSETR | (0x1<<5);GPIOF->MODER & (~(0x3<<16));EXTI->EXTICR3 &…

基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 之前讲了自定义业务表单&#xff0c;现在讲如何与流程进行关联 1、后端部分 WfCustomFormMapper.xml &…

ARM按键中断控制事件

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再按一次&#xff0c;灭按键2按下&#xff0c;蜂鸣器响。再按一次&#xff0c;不响按键3按下&#xff0c;风扇转&#xff0c;再按一次&#xff0c;风扇停 src/key_it.c #include"key_it.h" //GPIO初…

Acwing.4736步行者(模拟)

题目 约翰参加了一场步行比赛。 比赛为期 N 天&#xff0c;参赛者共 M 人&#xff08;包括约翰&#xff09;。 参赛者编号为 1∼M&#xff0c;其中约翰的编号为 P。 每个参赛者的每日步数都将被赛事方记录并公布。 每日步数最多的参赛者是当日的日冠军&#xff08;可以有并…

Flink-SQL join 优化 -- MiniBatch + local-global

背景 问题1. 近期在开发flink-sql期间&#xff0c;发现数据在启动后&#xff0c;任务总是进行重试&#xff0c;运行一段时间后&#xff0c;container heartbeat timeout&#xff0c;内存溢出(GC overhead limit exceede) &#xff0c;作业无法进行正常工作 023-10-07 14:53:3…

Commonjs与ES Module

commonjs 1 commonjs 实现原理 commonjs每个模块文件上存在 module&#xff0c;exports&#xff0c;require三个变量,然而这三个变量是没有被定义的&#xff0c;但是我们可以在 Commonjs 规范下每一个 js 模块上直接使用它们。在 nodejs 中还存在 __filename 和 __dirname 变…

【Java】Object equals

Object 类 equals&#xff08;&#xff09; Object 中的 equals() 是直接判断 this 和 obj 本身的值是否相等可以重写父类中的 equals() 比较两个对象成员属性值是否相等 示例代码&#xff1a; Student.java package com.api.Demo05;public class Student {private String n…

设置按键中断,按键1按下,LED亮,再按一次,灭按键2按下,蜂鸣器响。再按一次,不响按键3按下,风扇转,再按一次,风扇停

src/key_it.c #include"key_it.h" //GPIO初始化 void all_led_init() {//RCC使能RCC->MP_AHB4ENSETR | (0X1<<4);//设置PE10 PF10 PE8为输出GPIOE->MODER & (~(0X3<<20));GPIOE->MODER | (0X1<<20);//设置推挽输出GPIOE->OTYPER…

Kaadas凯迪仕助力亚运盛会,尽展品牌硬核科技与智能锁行业风采

9月23日至10月8日&#xff0c;亚洲最大规模体育赛事亚运会在杭州举办。作为国际性体育赛事&#xff0c;除赛中的各类竞赛项目外&#xff0c;杭州亚运会前后相关活动也吸引了大众目光的聚焦。 Kaadas凯迪仕智能锁作为此次杭州亚运会官方指定智能门锁&#xff0c;以#凯迪仕守护每…

【Mybatis】基于Mybatis插件+注解,实现敏感数据自动加解密

一、介绍 业务场景中经常会遇到诸如用户手机号&#xff0c;身份证号&#xff0c;银行卡号&#xff0c;邮箱&#xff0c;地址&#xff0c;密码等等信息&#xff0c;属于敏感信息&#xff0c;需要保存在数据库中。而很多公司会会要求对数据库中的此类数据进行加密存储。 敏感数据…

什么是大数据,大数据简介

大数据的概念通俗的说法 大数据&#xff0c;按照我的理解比较通俗易懂的是在数据量很多很大的情况下数据处理速度需要足够快&#xff0c;用我们以前传统意义上的的技术比如关系型数据库mysql没办法处理或者处理起来非常复杂&#xff0c;必须有一些新的处理技术也就是大数据处理…

深入理解强化学习——序列决策(Sequential Decision Making)

分类目录&#xff1a;《深入理解联邦学习》总目录 在本文中我们将介绍序列决策&#xff08;Sequential Decision Making&#xff09;过程中的各个过程。 智能体与环境 强化学习研究的问题是智能体与环境交互的问题&#xff0c;下图左边的智能体一直在与下图右边的环境进行交互…

微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果

今天写 movable-areamovable-view遇到了个头疼的问题 那就是 movable-view 监听了用户拖拽自己 但 我们小程序 上下滚动页面靠的也是拖拽 也就是说 如果放在这里 用户拖动 movable-view部分 就会永远触发不了滚动 那么 我们先可以 加一个 bindlongpress"longpressHandler…

golang gorm——hook和session配置

orm hook和session gorm hook gorm提供了一些hook函数&#xff0c;在增删查改、事务操作前后执行。需要让model实现对应接口。hook函数的执行会先于gorm sql运行日志的打印。 // gorm 插入更新都会默认开启事务&#xff0c;如果业务无需开启&#xff0c;在设置中可以关闭 //…

Maven 配置指南

目录 一、配置本地存储库 二、配置并行Artifact 解析 三、安全和部署设置 四、将镜像用于存储库 五、Profiles 六、可选配置 七、Settings 八、安全性 九、工具链 Maven配置发生在3个级别&#xff1a; 项目-大多数静态配置发生在pom.xml中安装-这是为Maven安装添加的…

扫描器(xray和bp联动)

文章目录 分类主动扫描和被动扫描bp与xray联动 分类 扫描器分为对web的扫描器和对主机的扫描器 主动扫描和被动扫描 主动扫描&#xff1a; 输入某个URL&#xff0c;然后由扫描器中的爬虫模块爬取所有链接&#xff0c;对GET、POST等请求进行参数变形和污染&#xff0c;进行重放测…

什么是信创测试?信创测试工具有哪些?

信创全称是“信息技术应用创新”&#xff0c;旨在实现信息技术自主可控&#xff0c;规避外部技术制裁和风险&#xff0c;其涉及产业链包括硬件、基础软件、应用软件、云服务、数据安全等领域。 信创测试是指对信创工程项目中的产品、系统等进行测试和验证&#xff0c;以确保其…

线程安全案例 --- 阻塞队列

小王学习录 今日鸡汤阻塞队列什么是阻塞队列什么是生产者消费者模型阻塞队列的使用阻塞队列的代码实现1. 实现一个普通队列2. 在普通队列里加入阻塞特性完善阻塞队列消息队列在数据结构的学习中我们知道队列是一种先进先出的数据结构, 但是存在一些特殊的队列, 比如: 优先级队列…

Seata入门系列【4】undo_log、global_table、branch_table、lock_table字段及作用详解

1 客户端 1.1 undo_log 在AT模式中&#xff0c;需要在参与全局事务的数据库中&#xff0c;添加一个undo_log表&#xff0c;建表语句如下&#xff1a; SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------------------------- -- Table structure for undo_log -- --…

Go 语言中的反射

今天主要来聊聊 Go 语言中反射&#xff0c;希望对你有新的认知 虽然很多人使用 Go 语言有一定时间了&#xff0c;甚至有的使用了 1 年 2 年&#xff0c;然后对于 Go 语言中的反射还是模棱两可&#xff0c;使用起来的时候&#xff0c;心里也不是非常有底气 更有甚者&#xff0…