开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

纯css制作的对话框窗口特效

基础概念

纯CSS制作的对话框窗口特效是一种使用CSS来创建用户界面元素的方法，这些元素通常用于显示信息、警告、确认或错误消息。这种特效不依赖于JavaScript或其他编程语言，而是通过CSS的动画、过渡和布局特性来实现。

相关优势

性能：纯CSS特效通常比使用JavaScript实现的特效更轻量，加载和渲染速度更快。
简洁性：CSS代码通常比JavaScript代码更简洁，易于维护和更新。
兼容性：大多数现代浏览器都支持CSS3特性，因此纯CSS特效具有较好的跨浏览器兼容性。
无JavaScript依赖：对于一些简单的交互效果，使用纯CSS可以避免引入额外的JavaScript库或框架。

类型

模态对话框：覆盖整个页面，阻止用户与页面其他部分交互，直到对话框关闭。
非模态对话框：不会覆盖整个页面，用户可以同时与对话框和其他页面元素交互。
弹出对话框：通常在用户点击某个按钮或链接时显示，显示一些信息或选项。

应用场景

表单验证：在用户提交表单前显示错误或警告信息。
确认对话框：在执行某些重要操作（如删除文件）前，提示用户确认。
通知消息：向用户显示一些系统通知或状态更新。

示例代码

以下是一个简单的纯CSS模态对话框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Modal Dialog</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="myBtn">Open Modal</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
        </div>
    </div>

    <script>
        var modal = document.getElementById("myModal");
        var btn = document.getElementById("myBtn");
        var span = document.getElementsByClassName("close")[0];

        btn.onclick = function() {
            modal.style.display = "block";
        }

        span.onclick = function() {
            modal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

参考链接

CSS-Tricks: Pure CSS Modal Dialog

常见问题及解决方法

对话框不显示：
- 确保CSS选择器正确，特别是.modal和.modal-content的样式。
- 检查JavaScript代码，确保在点击按钮时正确设置了.modal的display属性。

对话框关闭不正常：
- 确保.close按钮的点击事件正确绑定，并且在点击时将.modal的display属性设置为none。
- 检查window.onclick事件，确保在点击对话框外部时也能正确关闭对话框。

通过以上方法，可以创建一个简单且功能齐全的纯CSS对话框窗口特效。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【案例】纯CSS3制作文字分割特效

哈喽大家好，又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是纯CSS3制作文字分割特效同学们还想了解哪 01脚本简介纯CSS3制作文字分割特效是一款基于css3 clip-path...属性制作的模糊闪烁切割的文字动画特效。...02效果展示纯CSS3制作文字分割特效 ? 屏幕前的你想知道如何制作吗？...那就快戳下方视频学习吧~那就 03教学视频以上就是给同学们分享的纯CSS3制作文字分割特效教学视频~（想要观看清晰视频点击阅读原文）同学们还想了解哪些网页知识就在后台留言给我吧！

6432 0

纯CSS 神奇的边框特效

本文简介点赞 + 关注 + 收藏 = 学会了阅读本文需要 css 基础。要了解 border-radius 的用法。如果不懂的请先自行查阅 border-radius 的文档。...本期要做的特效如下图所示，请耐心看，这是个 gif动图： https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/069026dff6544ac18a1b2fbde4cead2e...image.png 这是一个会动的 div 。公式原理其实很简单，div 原本是方的，只需改成圆形即可。所以我们会用到 border-radius 这个属性。...要想让4个角都变成大小不一的圆角，且过渡顺滑，需要使用以下公式：相同的颜色加起来的和等于100，角与角之间的过渡就会变得比较顺滑。注意后半段的顺序（蓝色，绿色，绿色，蓝色）。...编码这里我还会用了 CSS 动画，让元素一直不规则的动起来。

2.2K2 0

纯CSS实现“精灵图”动态特效

首先我们来看了一下京东官网的一个例子：鼠标移入之前这个“相机”的是白色的，移入之后变为了红色：这就是一个精灵图的案例。...二、素材准备 javascript里面有一个经典的“开关灯”实例，其中是用到了两种颜色灯泡的图片，利用click()点击事件实现“开关灯”的动态效果。我们这里不使用JS，只用一张图片，利用CSS实现。...素材只需要一张图片：只要我们改变图片的位置，就可以实现“精灵图”。下面我们来利用CSS进行实现。...三、CSS实现 1、插入背景图片在浏览器中的显示效果为: 2、进行定位在浏览器中的显示效果为: 3、改变大小实现截取在浏览器中的显示效果为:...“精灵图”的CSS动态特效。

1.3K3 0

简单的纯CSS3白云飘动背景特效

这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云，以不同的速度进行运动，形成白云飘动的效果。 ?...HTML结构该白云飘动特效的HTML结果非常简单，使用一个来包裹一组作为白云的元素。.../div> CSS...样式白云使用.cloud 和它的:before和:after伪元素来制作。...after { width: 120px; height: 120px; top: -55px; left: auto; right: 15px; } 每一朵白云都执行moveclouds动画，但是它们的动画速度各不相同

1.9K5 0

纯CSS实现的圆角折叠菜单特效代码

CSS圆角折叠菜单 css"> #menu { font-size:12px; height:380px; margin... PHP CODE 网页特效

2.2K4 0

纯 CSS 制作的响应式图标集：Cikonss

现在很多图标是通过字体实现的，无需任何图片，现在 Cikonss 更进一步，图标是使用纯 CSS 制作，连字体都不需要了。...这套图标集现在已经有了 40 多个图标，并且全是响应式布局，和兼容多种浏览器（没有使用任何 CSS3 属性）。...目前这套图标集还偏小，但是相信如果每天持续的增长，将会在网页设计中变得非常有用，如果你只有几个图标，也可以试下：Cikonss。 ----

1.4K2 0

【案例】如何制作纯css3酷炫3D科技感菜单动画特效

哈喽大家好，又到了每周二案例环节啦~ 今天段老师给同学们带来的是一段纯CSS3实现的超炫酷3D菜单特效（实现了互动效果的菜单导航效果）。...该动效非常适合射击与游戏网站使用，有兴趣的同学快来了解下吧。纯css3 3D菜单特效 ▼ ? 、怎么样是不是非常炫酷屏幕前的你想知道如何制作吗？...那就快戳下方视频学习吧~ 教学视频 ▼ 视频内容兼容IE8及以上浏览器，小编建议使用【火狐】浏览器预览兼容IE8及以上浏览器，小编建议使用以上就是给同学们分享的纯css3 3D菜单特效的教学视频...~聪明的你学会了吗?

2.7K1 0

使用纯css制作类似轮播图效果

思路: 首先先定义一个足够宽的大容器例如300vw 三个页面宽度的大小里面放3个小盒子每个小盒子占满全屏,100vw 100vh 点击下面的按钮然后选择大容器元素给大容器的left值 (相对定位...-- 这里定义三个box相同的类名,是为了在css写三个盒子的共同样式 --> CSS..., 主要实现思路是运用到的相对定位的偏移值当我们点击第一个button 的适时候 button 已经绑定input元素点击第一个button content...(也支持定制): ui渐变 - 美丽的彩色渐变 (uigradients.com) CSS 渐变 — 生成器、制作器和背景 (cssgradient.io)

891 0

纯CSS制作加制作动画版哆啦A梦

哆啦A梦（机器猫）我们大家一定都很熟悉，今天给大家演示怎么用纯CSS代码，来做一个动画版的哆啦A梦. 效果图： ? 下面代码同学可以查看一下，每个线条及椭圆都是纯CSS代码生成。...画出各部分的形状和颜色，然后使用绝对定位（absolute）和相对定位（relative）改变其位置。各种带弧度形状，使用border-radius属性实现。...使用background属性的-webkit-gradient() / -moz-linear-gradient() 画出身体部分的线性色彩变化。 html代码如下：的主体 --> 的头部 --> css代码如下： /*给背景设置渐变色*/

8784 0

纯CSS实现水波纹的电池充电动画特效

前置知识：要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧： animation 、 transform 和 filter 这三个就不多做介绍了，基本上所有的动画都会用到这两个属性...可设置四个值，与 margin、padding 的使用方法一样也就是每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。...如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。...box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4); } } 水波纹特效...这个特效相信大家都见过，其思想就是在上面的大概位置上设置背景颜色，用相同的底色覆盖，然后用到 translate 这个属性，通过转化 x 、 y 值，然后通过不停的旋转角度，至于数值为啥是这个值，我也搞不清楚

4101 0

【案例】纯CSS3霓虹样式搜索框动画特效

01脚本简介纯CSS3霓虹样式搜索框动画特效是一款基于css3 transform属性制作点击搜索按钮展开收缩搜索框代码。 02效果展示纯CSS3霓虹样式搜索框动画特效 ?...屏幕前的你想知道如何制作吗？那就快戳下方视频学习吧~ 03教学视频 ▼ 以上就是给同学们分享的纯CSS3霓虹样式搜索框动画特效教学视频~聪明的你学会了吗?

1.5K2 0

纯CSS3实现图片无限旋转加载动画特效

纯 CSS3 实现 loading......动画加载效果，需要一张透明的 png 图片，代码如下： HTML： CSS： ...(循环) */ animation: loading 3s linear infinite; } /*通过@keyframes规则,能够创建动画 , que 定义动画的名称... 可自己定义*/ @keyframes loading { /*以百分比来规定改变发生的时间也可以通过"from"和"to",等价于0% 和 100%*/ 0%

8.1K2 0

纯HTML CSS制作导航栏下拉菜单

大家好，又见面了，我是你们的朋友全栈君。大一web网页设计，尝试更多炫酷页面内容，狠狠加分！！！！... css... 新人制作不易

6.3K4 0

如何使用纯 CSS 制作四子连珠游戏

序言：你有没有想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决？这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。...“纯 CSS”演示很早就有了，但是随着浏览器和CSS的发展，新的挑战又出现了。CSS 和 HTML 预处理器也促进了纯 CSS 演示的发展。...有时候，预处理程序用于硬编码每个可能的场景，比如 :checked 的长字符串和相邻兄弟选择器。在本文中，我将介绍使用纯CSS 制作的四子连珠游戏的关键思想。...我经常使用 Lea Verou 制作的 CSS3 图案库。它是使用渐变制作的图案集，而且很容易编辑。我使用了currentcolor，非常适合圆盘的图案。...我添加了头部，并且复用了自己制作的纯 CSS 波纹按钮。 ? 现在，布局和圆盘已经设计好了，只是还不能游戏。把圆盘放到游戏板上接下来，需要让用户轮流将圆盘放到四子连珠的游戏板上。

2K2 0

我是怎样制作这个逼真的红色开关的（纯CSS）

在制作过程中，我使用了各种不同的CSS技术，包括渐变，3D转换，动画和过渡。在本教程中，我将深入探讨其中的一些技术。...演示地址：http://haiyongcsdn.gitee.io/realistic-red-switch/ 模拟状态开关具有2个状态-开启和关闭，但是CSS无法保持这种状态。...由于我们只需要维护2个状态，因此checkbox元素是一个不错的选择。我们可以使用:checkedCSS选择器根据复选框是否选中来应用CSS。...我们将整个内容包装在中，以将整个元素的click事件链接到复选框，然后使用CSS隐藏复选框本身。 <label class="switch

3992 0

网站纯CSS全屏loading特效（由中间向两边散开）

网页特效预览预览2：gif图片动的有点快将代码放在head.php【顶部文件里】 css新建一个css文件把以下代码放在之前 css" href="css/loader.css">//路径为自己的css路径以下PHP代码 CSS

1.9K6 0

CSS特效，给你的惊喜

开场今天我们的主角是伪类：placeholder-shown 效果效果可以参见下面的GIF示意： ? 现在这种设计在移动端很常见，因为宽度是稀缺的。...相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。...输入内容功能布局效果也是正常的： ? 纯CSS实现，要比JS实现好一千倍，代码少，性能高，样式调整方便，上手简单容易，可谓是前端必备技能了。...实现原理拿第一个fill模式的输入框举例，HTML结构如下： ? 首先，让浏览器默认的placeholder效果不可见，我们可以让颜色透明即可，如下CSS： ?...其他 demo页面还使用了其他一些CSS3属性，例如，外部容器宽度是跟着输入框宽度走的，使用的是width:fit-content这个声明。

2K3 0

纯CSS制作多扇区饼图和环形图

考虑到我们只需要显示一个静态的饼图，就在想能否用Css直接画一个出来呢。这样代码量少，运行速度还更快。毕竟一般的图标空间都是一大堆代码，运行都需要时间的。...还真找到网上有用Css画饼图的，于是就Copy代码运行了下，第一感觉还挺不错的。正准备大量修改用于项目的时候发现，尽然只支持2个扇区的饼图。心顿时凉了大半截。同时彻夜未眠......虽然彻夜未眠，但还真想出一个用CSS画多扇形饼图的方案。先出一个效果图： image.png 利用到的Css特性：圆角旋转 View/Div重叠一、绘制原理： 1....在第一个区域放置一个和区域一样大的view/div, 并设置背景，然后进行旋转 Css旋转是以为View/Div中心点进行旋转的，所以还需要设置旋转的中心 width:100%;height:100%;...html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 纯CSS

4.8K4 0

纯css3实现小鸡从鸡蛋破壳而出动画特效

实现一个使用纯css3实现小鸡破壳的效果示例效果如下所示示例代码 ...100% { -webkit-transform: scaleY(1); transform: scaleY(1); } } 实现这个小鸡破壳,使用css3...,结合动画关键帧就可以实现,结合元素绝对定位,使用div+css进行绘制当鼠标移上去时,实现蛋黄与蛋壳的分离,使用css3中的transform,变换,垂直反方向上,平移就可以实现

2491 0

前端特效开发 | 图片翻转的制作

但是在结构的书写中并没有提供面板信息的标签，所以就需要使用JS动态的添加了一个em标签，借助append方法把相应的标签添加到了对应的img标签的后面。如下图所示： ?...charset="utf-8" /> jquery hover鼠标悬停图片旋转动画展示 css..." href="css/reset.css" /> ...css"> .allbrand .brand { overflow: hidden; width: 390px;...当然除此之外，也还可以借助CSS3的一些方法来进行实现，大家在学习完此方法之后不妨也去使用CSS3试试。

3.9K7 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭