jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果實(shí)例代碼
本文是小編實(shí)現(xiàn)的一個簡單的jquery點(diǎn)擊彈出背景變暗遮罩效果,并且點(diǎn)擊空白處隱藏彈出層的效果,效果非常棒,小編只給大家貼出了關(guān)鍵代碼了,大家可以根據(jù)個人需要適當(dāng)?shù)奶砑觾?nèi)容。
js代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$(".tkyy").click(function(event){
event.stopPropagation(); //停止事件冒泡
$(".marsk-container").toggle();
});
//點(diǎn)擊空白處隱藏彈出層
$("body").click(function(event){
var _con = $('.tkyy_con'); // 設(shè)置目標(biāo)區(qū)域
if(!_con.is(event.target) && _con.has(event.target).length ==0){
$('.marsk-container').hide(); //淡出消失
}
});
});
</script>
css代碼:
.marsk-container{background: #FFFFFF; display: none;position: absolute;position: fixed; top: 0; right: 0; left: 0; bottom: 0px; background: rgba(0,0,0,.5); z-index: 10; }
html代碼:
<div class="tkyy"><span class="mui-icon mui-icon-arrowdown"></span>請選擇退款類型 </div>
<div class="marsk-container">
<div class="tkyy_con">
<div class="mui-input-row mui-radio ">
<label>退運(yùn)費(fèi)</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>收到商品破損</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>少件/漏發(fā)</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>商品需要維修</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>發(fā)票問題</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>收到商品與描述不符</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>商品質(zhì)量問題</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>描述問題</label>
<input name="radio" type="radio" checked>
</div>
</div>
</div>
效果如圖:

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
- jQuery插件實(shí)現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過遮罩并高亮顯示效果
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片變亮其他變暗效果
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時高亮,同時其他同級元素變暗的效果
相關(guān)文章
jQuery取得設(shè)置清空select選擇的文本與值
這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個不錯的示例,需要的朋友可以參考下2014-07-07
基于jQuery滑動桿實(shí)現(xiàn)購買日期選擇效果
這是一款基于jQuery的滑動桿購買日期選擇插件,它的外觀仿的是阿里云的服務(wù)器購買日期選擇界面。這款jQuery插件非常適合在一些虛擬產(chǎn)品購買頁面上使用,它可以幫助你的用戶快速選擇產(chǎn)品的購買日期,感興趣的朋友跟著小編學(xué)習(xí)吧2015-09-09
html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下,使用jquery時其中$與velocity變量中的$沖突,下面有個不錯的解決方法,感興趣的朋友可以參考下2013-11-11
jQuery模擬實(shí)現(xiàn)天貓購物車動畫效果實(shí)例代碼
最近在項(xiàng)目開發(fā)中遇到這樣的需求,點(diǎn)擊購買按鈕,模擬拋物線將物品彈到購物車?yán)?,購物車添加物品后,顯示+1動畫。效果非常棒,接下來小編把實(shí)例代碼分享到腳本之家平臺,需要的的朋友參考下吧2017-05-05
基于jquery的設(shè)置頁面文本框 只能輸入數(shù)字的實(shí)現(xiàn)代碼
之前寫過的方法有缺陷,可以輸入空格?,F(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過濾空格的功能。2011-04-04
jquery 表單進(jìn)行客戶端驗(yàn)證demo
用jquery對表單進(jìn)行客戶端驗(yàn)證demo ,學(xué)習(xí)jquery的朋友可以參考下。2009-08-08

