请问有谁知道设计网页遮罩css跟html的代码怎么写 就是点击之后弹出个小窗口然后背景色变暗的那种急急急啊
导读:本文共832.5字符,通常情况下阅读需要3分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:HTML:<p class="shade"></p> <div class="tanceng"> <p class="cue">亲,活动还在继续,5月6日-5月8日抽奖,要累计50万以上才可参加哦~</p> <p ... ...
目录
(为您整理了一些要点),点击可以直达。HTML:<p class="shade"></p> <div class="tanceng"> <p class="cue">亲,活动还在继续,5月6日-5月8日抽奖,要累计50万以上才可参加哦~</p> <p class="okbtn pt5"> <a href="javascript:void(0);">确 定</a> </p> </div>CSS:.shade{ width: 100%; background-color: rgba(0,0,0,0.3); position: fixed; left: 0; top: 0; display: none;}.tanceng{ background-color: #ffeb8d; width: 240px; padding: 20px; line-height: 200%; color: #f31b33; position: fixed; top: 20%; left: 50%; border-radius: 0.6rem; margin-left: -140px; display: none;}.okbtn a{ display: block; width: 80%; background-color: #f31b33; color: #fff; line-height: 250%; font-size: 16px; text-align: center; border-radius: 5px; margin:0 auto;}JS:var webH = $(window).height();//这里显示遮罩$("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮 $(".shade,.tanceng").css("display","block"); $(".shade").height(webH); $(".cue").html("亲,活动还在继续,5月6日-5月8日抽奖,要累计购买50万以上才可参加哦~"); //这个可以不要,这是我自己的东西 });//这里隐藏遮罩$(".okbtn").click(function(e){ $(".shade,.tanceng").css("display","none"); $(".shade").height(0); })
请问有谁知道设计网页遮罩css跟html的代码怎么写 就是点击之后弹出个小窗口然后背景色变暗的那种急急急啊的详细内容,希望对您有所帮助,信息来源于网络。