用CSS做的简单弹窗

　　最近在学习css，学习的时候发现，css是多么博大精深，是那么的神奇。

　　老师给了一个项目给我们做练习，以下我介绍一个用纯css简单做的弹窗

先看下其效果：

想整理下思路：

首先我设置了两个按钮，一个是打开弹窗，另外是关闭弹窗，这两个按钮用label关联到input：radio。

布局如下：

<input type="radio" name="btn" id="close" class="btn"/>
<div class="box1"><label for="window1" class="text">投票</label><input type="radio" name="btn" id="window1" class="btn" /><div class="window"><label for="close" class="fr"><img src="data:images/voting-close.png"/></label><div><p>感谢您参与到我们的投票活动，您的投票已成功！</p><p>请留下您的联系方式，我们会在活动结束时举办一个抽奖活动，z中奖信息会公布在官网上，敬请留意，谢谢合作！</p><form action="" method="post">您的姓名：<input type="text" name="username" /><br /> 您的电话：<input type="text" name="number" /><br /><input type="submit" value="提交" /></form></div></div>
</div>

这个时候我们来设置一个大div的样式class=”box1“：

.box1 {position: relative;width: 320px;height: 275px;background: url(images/voting-img1.png) no-repeat;
}

然后设置一个投票按钮，这里是通过相对定位绝对定位来调整投票按钮的位置：

.text {position: absolute;bottom: 0;left: 109px;color: #fff;padding: 10px 20px 10px 20px;background: #0000FF;border-radius: 10px;
}

再来设置一个弹窗window，用绝对定位设置弹窗window的位置。

因为弹窗window事先是隐藏的，这里通过把宽高设为0，所以内容判定为超过容器，用overflow:hidden;隐藏整个弹窗window。

.window {overflow: hidden;position: fixed;top: 30%;left: 25%;width: 0px;height: 0px;background: #c9cbcd;z-index: 111;
}

再把input:radio隐藏起来

.btn{display: none;
}

设置弹窗window的宽高，让弹窗window弹出来。

我们通过checked伪类和相邻兄弟（”+“）选择器来调整input:radio的选中状态从而来实现弹窗window弹出与关闭。

.btn:checked+ .window {width: 550px;height: 376px;
}

这里大体介绍了主要的css代码，另外一些字体等样式没写出来，但基本实现效果了。

这里我在做的时候遇到了一个问题，就是原本投票按钮我是用<button>按钮标签做的，再用<label>标签包住，

但是这里通过点击<button>标签并不能使input:radio被选定（checked）。后来我直接把<button>标签去掉了。

这里主要是要理解伪类checked和相邻兄弟选择器。

在没有js下，伪类checked和相邻兄弟选择器也能实现图片切换。

转载于:https://www.cnblogs.com/lzh739887959/p/5797803.html

用CSS做的简单弹窗相关推荐

使用css做一个简单的车轮滚滚效果
学了css之后发现很多效果只要几行代码就能实现,这个车轮滚滚的效果也不例外. 首先设置个大盒子,设置他的宽度(随意多少,但是肯定要比车轮的宽度大),高度与车轮保持一致即可.跟我一起来做个简单的车轮滚滚 ...
html/css做一个简单的个人简历
今天闲着无聊做了个简单的小demo,做完了之后还是很无聊,就简单整理了下,写下了这篇文章. 话不多说,按照惯例先放效果图上面是移动端的效果图,pc端布局一样,只是某些元素的大小略有不同响应式主要是 ...
用HTML+CSS做一个简单好看的环保网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家 ...
用HTML+CSS做一个简单好看的校园社团网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...
用HTML+CSS做一个简单的美食网页---web学生网页设计作业源码
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计 ...
html+css——做一个简单的底部导航栏
ps:小项目由html和css实现目录项目设计效果图设计 html部分 css部分源代码项目设计效果图话不多说,先直接上一下完成后的效果图: 通过以上效果图可以大致想一下你的思路,以及 ...
用HTML和CSS做一个简单的静态京东手机端页面含源码分享
10分钟内的时间可以完成,具体完成效果如下: 百度链接:https://pan.baidu.com/s/11XGuDfeDZsY2xYYmq4KcRg 提取码:42jq 整体文件为: 代码部分: i ...
只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系如图所示:红 ...
用HTML+CSS做一个简单好看的汽车网页

用CSS做的简单弹窗

用CSS做的简单弹窗相关推荐

最新文章

热门文章