0514-86177077
9:00-17:00（工作日）
上午閑來無事，用html及原生js寫個彈窗，供參考。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin: 0px; } .zhezhao{ position: fixed; left: 0px; top: 0px; background: #000; width: 100%; height: 100%; opacity: 0.5; } .tankuang{ position: relative; background: #fff; width: 50%; height: 80%; border-radius: 5px; margin: 5% auto; } #header{ height: 40px; } #header-right{ position: absolute; width: 25px; height: 25px; border-radius: 5px; background: red; color: #fff; right: 5px; top: 5px; text-align: center; } </style> </head> <body> <button type="button" onclick="dianwo()">點我</button> <div class="zhezhao" id='zhezhao'> <div class="tankuang"> <div id="header"> <span>我是彈窗</span> <div id="header-right" onclick="hidder()">x</div> </div> </div> </div> <script type="text/javascript"> document.getElementById('zhezhao').style.display="none"; function dianwo(){ document.getElementById('zhezhao').style.display=""; } function hidder(){ document.getElementById('zhezhao').style.display="none"; } </script> </body> </html>
到此這篇關于html實現彈窗的實例的文章就介紹到這了,更多相關html彈窗內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
標簽：阜陽 崇左 晉中 北海 營口 河池 眉山 青海
上一篇：HTML5來實現本地文件讀取和寫入的實現方法
下一篇：Html5大屏數據可視化開發的實現
Copyright ? 1999-2012 誠信 合法 規范的巨人網絡通訊始建于2005年
蘇ICP備15040257號-8
<pre id="gqu4w"></pre>
