溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

js+html5實(shí)現(xiàn)半透明遮罩層彈框效果

發(fā)布時(shí)間：2020-10-22 23:07:50 來源：腳本之家 閱讀：273 作者：ouqi_qiou 欄目：web開發(fā)

點(diǎn)擊按鈕，出現(xiàn)半透明遮罩層彈框，說說自己之前發(fā)過的愁吧

1、遮罩層半透明了 彈框也跟著半透明了 就像這樣 絕望吧 

js+html5實(shí)現(xiàn)半透明遮罩層彈框效果

是哪里錯(cuò)了呢？你的css是這樣寫的吧：

js+html5實(shí)現(xiàn)半透明遮罩層彈框效果

應(yīng)該這樣：

js+html5實(shí)現(xiàn)半透明遮罩層彈框效果

需要注意的是這幾個(gè)參數(shù)的意思：RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一個(gè)參數(shù) 0.5 是指的透明度 1表示不透明

2、半遮罩層里面的內(nèi)容可以上下滑動(dòng) 感覺挺好玩的 /笑哭

修改就是把半遮罩層的position設(shè)置為fixed 里面的內(nèi)容就不會(huì)變啦

接下來就是代碼show

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }

 .tip{
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(90, 90, 90, 0.5);
  z-index: 99999;
  }
  
  .collectSucc{
  position: fixed;
  height: auto;
  width: 70%;
  background-color: #ffffff;
  margin-left: 15%;
  margin-top: 50%;
  }
  
  .collectSucc_top{
  color: #666666;
  font-size: 12px;
  }
  
  .collectSucc_top img{
  width: 60px;
  margin-top: 20px;
  }
  
  .collectSucc_buttom{
  margin-top: 20px;
  height: 40px;
  line-height: 40px;
  background-color: #2d99f5;
  color: #FFFFFF;
  font-size: 13px;
  }
 </script>
 
 </head>

 <body>
 <div class="tip">
 <!--收款成功-->
 <div class="collectSucc">
 <div class="collectSucc_top">
 <img src="../../img/tip.png" />
 <div>搶單失敗，試試其他行程吧！</div>
 </div>
 <div class="collectSucc_buttom">
 我知道了
 </div>
 </div>
 </div>
 你好 我叫歐琪 啊哈哈 
 
 </body>

</html>

樣式是這樣的：

js+html5實(shí)現(xiàn)半透明遮罩層彈框效果

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手