原生CSS，实现点击按钮出现交互弹窗【新手扫盲】

效果图：

实现原理：

将弹窗内容写在一个div里面，设置display属性为none
按钮点击绑定事件，将上述div的display属性改为block

HTML代码

 <body><p>示例弹出页：<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p><div id="light" class="white_content"><div id="font_login">Login in</div><!-- 登陆部分代码 --><form action="" method="post" id="form_submit">账号：<input type="text" name="" id="name" value="" /></br>密码：<input type="password" name="" id="password" value="" /></br><input type="button" value="确认" class="button_beautiful ceshi" /> <!-- 不要点击 --><input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" /></form></div><div id="fade" class="black_overlay"></div></body>

CSS代码：

         .black_overlay {display: none;/* 此元素不会被显示*/position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: #bbbbbb;z-index: 1001;/* z-index 属性设置元素的堆叠顺序。*/opacity: .80;/* opacity 属性设置元素的不透明级别。*/}.white_content {display: none;position: absolute;top: 20%;border: 1px solid #bbbbbb;border-radius: 20px;background-color: white;z-index: 1002;/*层级要比.black_overlay高，这样才能显示在它前面*/overflow: auto;}#light {position: absolute;left: 50%;/* top: 50%; */width: 300px;height: 250px;margin-left: -150px;/* margin-top: -125px */;}#form_submit {text-align: center;margin-left: 10px;margin-top: 10px;}#font_login {font-weight: 400;font-size: 24px;color: #BBBBBB;text-align: center;margin-top: 20px;}.button_beautiful {width: 60px;height: 34px;/* 高度 */border-width: 0px;border-radius: 6px;background: #4ECDC4;cursor: pointer;outline: none;color: white;font-size: 16px;margin-top: 20px;}</style>

全部代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.black_overlay {display: none;/* 此元素不会被显示*/position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: #bbbbbb;z-index: 1001;/* z-index 属性设置元素的堆叠顺序。*/opacity: .80;/* opacity 属性设置元素的不透明级别。*/}.white_content {display: none;position: absolute;top: 20%;border: 1px solid #bbbbbb;border-radius: 20px;background-color: white;z-index: 1002;/*层级要比.black_overlay高，这样才能显示在它前面*/overflow: auto;}#light {position: absolute;left: 50%;/* top: 50%; */width: 300px;height: 250px;margin-left: -150px;/* margin-top: -125px */;}#form_submit {text-align: center;margin-left: 10px;margin-top: 10px;}#font_login {font-weight: 400;font-size: 24px;color: #BBBBBB;text-align: center;margin-top: 20px;}.button_beautiful {width: 60px;height: 34px;/* 高度 */border-width: 0px;border-radius: 6px;background: #4ECDC4;cursor: pointer;outline: none;color: white;font-size: 16px;margin-top: 20px;}</style></head><body><p>示例弹出页：<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p><div id="light" class="white_content"><div id="font_login">Login in</div><!-- 登陆部分代码 --><form action="" method="post" id="form_submit">账号：<input type="text" name="" id="name" value="" /></br>密码：<input type="password" name="" id="password" value="" /></br><input type="button" value="确认" class="button_beautiful ceshi" /> <!-- 不要点击 --><input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" /></form></div><div id="fade" class="black_overlay"></div></body>
</html>

原生CSS，实现点击按钮出现交互弹窗【新手扫盲】相关推荐

原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框模态弹窗操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...
原生JS实现点击按钮显示更多内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
使用原生js实现点击按钮展示不同状态内容
话不多说直接上预览图和代码吧,图片可以自己找一些素材贴上去就行了 <!doctype html> <html> <head> <meta charset=&q ...
原生js实现点击按钮显示/隐藏图片
目录结构: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
微信小程序点击按钮弹出弹窗_转载 | 广东大学生就业创业微信小程序操作流程详解（一）...
广东大学生就业创业微信小程序操作流程详解(一) 转眼来到10月,炎炎夏日也阻挡不了青春的忙碌,同学萌走出校园,迈向社会. 在这段时间,同学们不仅要准备毕业论文,应对毕业答辩,还需要兼顾各种毕业手续的 ...
微信小程序点击按钮弹出弹窗_微信小程序带图片弹窗简单实现
怎样实现一个带图片显示的模态视图弹窗呢?有时候我们的确有这个需求,自己实现?不不不,哪有官方的方便! 使用官方组件实现图片模态弹窗下面我来介绍一种使用官方组件就能实现的方法: (PS:最近发现一个问 ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...

原生CSS，实现点击按钮出现交互弹窗【新手扫盲】

效果图：

实现原理：

HTML代码

CSS代码：

全部代码：

原生CSS，实现点击按钮出现交互弹窗【新手扫盲】相关推荐

最新文章

热门文章