原生CSS，实现点击按钮出现交互弹窗【新手扫盲】
生活随笔
收集整理的這篇文章主要介紹了
原生CSS，实现点击按钮出现交互弹窗【新手扫盲】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果圖：
實現(xiàn)原理：
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，实现点击按钮出现交互弹窗【新手扫盲】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery下的ajax【5分钟掌握】
- 下一篇： jQuery入口函数的四种写法【1分钟掌