日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

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

發布時間：2025/1/21 91 豆豆
生活随笔 收集整理的這篇文章主要介紹了 原生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，实现点击按钮出现交互弹窗【新手扫盲】的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。