js+html5實現半透明遮罩層彈框效果

2019-11-19 16:04:09

字體：大中小

來源：轉載

供稿：網友

點擊按鈕，出現半透明遮罩層彈框，說說自己之前發過的愁吧

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

是哪里錯了呢？你的css是這樣寫的吧：

應該這樣：

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

2、半遮罩層里面的內容可以上下滑動感覺挺好玩的 /笑哭

修改就是把半遮罩層的position設置為fixed 里面的內容就不會變啦

接下來就是代碼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>

樣式是這樣的：