原生css，实现点击按钮出现交互弹窗【新手扫盲】 -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
原生css，实现点击按钮出现交互弹窗【新手扫盲】
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
效果图：
实现原理：
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 indiv><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;}全部代码：
<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 indiv><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，实现点击按钮出现交互弹窗【新手扫盲】的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： jquery下的ajax【5分钟掌握】
- 下一篇： jquery入口函数的四种写法【1分钟掌