js+html5實現(xiàn)半透明遮罩層彈框效果
更新時間：2020年08月24日 09:31:03 作者：ouqi_qiou
這篇文章主要為大家詳細介紹了js+html5實現(xiàn)半透明遮罩層彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
點擊按鈕，出現(xiàn)半透明遮罩層彈框，說說自己之前發(fā)過的愁吧
1、遮罩層半透明了 彈框也跟著半透明了 就像這樣 絕望吧
是哪里錯了呢？你的css是這樣寫的吧：
應(yīng)該這樣：
需要注意的是這幾個參數(shù)的意思：RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一個參數(shù) 0.5 是指的透明度 1表示不透明
2、半遮罩層里面的內(nèi)容可以上下滑動 感覺挺好玩的 /笑哭
修改就是把半遮罩層的position設(shè)置為fixed 里面的內(nèi)容就不會變啦
接下來就是代碼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>
樣式是這樣的：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于uniapp藍牙連接的通用步驟,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06
這篇文章給大家分享了javascript中UMD規(guī)范的代碼推演的相關(guān)的知識點內(nèi)容，有興趣的朋友們學(xué)習(xí)下。2018-08-08
這篇文章主要介紹了JS通過位運算實現(xiàn)權(quán)限加解密的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
echarts-for-weixin是ECharts官方維護的一個開源項目，提供了一個微信小程序組件，可以通過這個組件在微信小程序中使用?ECharts?繪制圖表。本文將通過示例詳解微信小程序使用ECharts的方法，感興趣的可以了解一下2022-06-06
這篇文章主要介紹了js使用遞歸方式獲取html頁面節(jié)點的方法，大家可以參考使用吧2013-12-12
這篇文章主要為大家詳細介紹了js輪盤抽獎實例，分析js輪盤抽獎實現(xiàn)原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript實現(xiàn)鼠標經(jīng)過顯示下拉框
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標經(jīng)過顯示下拉框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了ZZ需求小程序純文本實現(xiàn)@功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
在Javascript里訪問SharePoint列表數(shù)據(jù)的實現(xiàn)方法
在進行SharePoint訂制的時候經(jīng)常會遇到開發(fā)手段受限制的問題，比如通常公司都會限制服務(wù)器的訪問以及部署，很多開發(fā)都只能夠在客戶端來進行2011-05-05
javascript 函數(shù)限制調(diào)用代碼
javascript 函數(shù)限制調(diào)用代碼，需要的朋友可以參考下。2010-05-05