前端如何创建好看的简洁的蒙版弹窗

简介: 前端如何创建好看的简洁的蒙版弹窗

平时我们创建弹窗蒙版时,都是给创建一个div,然后给div添加透明背景色,相信大多数人都是这样写的, 包括我以前也是这样创建蒙版弹窗的。

下面给大家一个介绍一个新的方法

<div id="app">
        这里是页面主题内容
</div>
<div>
       这里是弹窗内容 //这里不需要创建蒙版
<div>

当前弹窗显示是

我们在 app 里修改样式

<div id="app" style="filter: blur(3px);">
        这里是页面主题内容
</div>
<div>
       这里是弹窗内容 //这里不需要创建蒙版
<div>

其实就是添加了   filter: blur(3px); 页面就会出现模糊蒙版 ,  当px像素越大,页面越模糊

效果如下 ,非常实用,

相关文章
|
JSON 开发框架 前端开发
【前端开发选择】提醒设计决策:弹窗与Toast通知,哪个更适合?
本文讨论了前端开发中弹窗与Toast通知的选择,通过实际案例比较了两者在用户体验上的差异,并分享了如何使用Toast通知在当前页面提供更友好的交互反馈。
444 2
【前端开发选择】提醒设计决策:弹窗与Toast通知,哪个更适合?
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
752 6
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
前端开发
前端代码简洁之路,后台系统之详情页设计
前端业务开发中,为了脱离舒适区,也为了解放重复功能开发的劳动力,会将一些功能进行改造,本期改造千篇一律的详情页。
4428 26
前端代码简洁之路,后台系统之详情页设计
|
前端开发
前端知识笔记(二十)———简易弹窗制作
前端知识笔记(二十)———简易弹窗制作
247 0
|
移动开发 前端开发 HTML5
前端:HTML5中dialog弹窗标签
前端:HTML5中dialog弹窗标签
428 0
前端:HTML5中dialog弹窗标签
|
前端开发
前端列表页+element-puls实现列表数据弹窗功能
前端列表页+element-puls实现列表数据弹窗功能
739 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1461 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
781 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1026
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    435
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    343
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    327
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    438
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    618
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    872
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    230
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    716
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    406
  • 下一篇
    开通oss服务