jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果實(shí)例代碼
本文是小編實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的jquery點(diǎn)擊彈出背景變暗遮罩效果,并且點(diǎn)擊空白處隱藏彈出層的效果,效果非常棒,小編只給大家貼出了關(guān)鍵代碼了,大家可以根據(jù)個(gè)人需要適當(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>請(qǐng)選擇退款類型 </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)擊彈出背景變暗遮罩效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(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)過時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果
相關(guān)文章
jQuery取得設(shè)置清空select選擇的文本與值
這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-07-07基于jQuery滑動(dòng)桿實(shí)現(xiàn)購(gòu)買日期選擇效果
這是一款基于jQuery的滑動(dòng)桿購(gòu)買日期選擇插件,它的外觀仿的是阿里云的服務(wù)器購(gòu)買日期選擇界面。這款jQuery插件非常適合在一些虛擬產(chǎn)品購(gòu)買頁(yè)面上使用,它可以幫助你的用戶快速選擇產(chǎn)品的購(gòu)買日期,感興趣的朋友跟著小編學(xué)習(xí)吧2015-09-09jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下,使用jquery時(shí)其中$與velocity變量中的$沖突,下面有個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-11-11jQuery模擬實(shí)現(xiàn)天貓購(gòu)物車動(dòng)畫效果實(shí)例代碼
最近在項(xiàng)目開發(fā)中遇到這樣的需求,點(diǎn)擊購(gòu)買按鈕,模擬拋物線將物品彈到購(gòu)物車?yán)铮?gòu)物車添加物品后,顯示+1動(dòng)畫。效果非常棒,接下來小編把實(shí)例代碼分享到腳本之家平臺(tái),需要的的朋友參考下吧2017-05-05jquery對(duì)table做排序操作的實(shí)例演示
這篇文章主要介紹了jquery對(duì)table做排序操作的實(shí)例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過程,需要的朋友可以參考下2017-08-08基于jquery的設(shè)置頁(yè)面文本框 只能輸入數(shù)字的實(shí)現(xiàn)代碼
之前寫過的方法有缺陷,可以輸入空格。現(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過濾空格的功能。2011-04-04jquery 表單進(jìn)行客戶端驗(yàn)證demo
用jquery對(duì)表單進(jìn)行客戶端驗(yàn)證demo ,學(xué)習(xí)jquery的朋友可以參考下。2009-08-08