jQuery實(shí)現(xiàn)簡(jiǎn)單彈窗遮罩效果
更新時(shí)間：2017年02月27日 15:35:31 作者：我本善良
本文主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單彈窗遮罩效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
效果圖：
圖（1）初始圖
圖（2）點(diǎn)擊按鈕后
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background: #666;
opacity: 0.5;
filter: alpha(opacity=50)-moz-opacity: 0.5;
display: none;
}
.popup {
position: absolute;
left: 50%;
width: 600px;
height: 200px;
background: #fff;
z-index: 1000;
border: 1px solid #333;
display: none;
}
.btn_close {
position: absolute;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<button class="btn_show">遮罩層</button>
<div id="mask"></div>
<div class="popup">
<button class="btn_close">x</button>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
$(function() {
$('.btn_show').click(function() {
$('#mask').css({
display: 'block',
height: $(document).height()
})
var $Popup = $('.popup');
$Popup.css({
left: ($('body').width() - $Popup.width()) / 2+ 'px',
top: ($(window).height() - $Popup.height()) / 2 + $(window).scrollTop() + 'px',
display: 'block'
})
})
$('.btn_close').click(function() {
$('#mask,.popup').css('display', 'none');
})
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- Jquery實(shí)現(xiàn)自定義彈窗示例
- 小巧強(qiáng)大的jquery layer彈窗彈層插件
- jQuery實(shí)現(xiàn)彈窗居中效果類似alert()
- 運(yùn)用JQuery的toggle實(shí)現(xiàn)網(wǎng)頁(yè)加載完成自動(dòng)彈窗
- jquery模擬alert的彈窗插件
- jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法
- jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼
- Jquery彈出窗口插件 LeanModal的使用方法
- jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明
- jQuery Mobile彈出窗、彈出層知識(shí)匯總
- jQuery實(shí)現(xiàn)的兩種簡(jiǎn)單彈窗效果示例
相關(guān)文章
jquery判斷單個(gè)復(fù)選框是否被選中的代碼，需要的朋友可以參考下。2009-09-09
JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時(shí)聊天通信程序
這篇文章主要介紹用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript（jsjac）框架構(gòu)建一個(gè)BS Web的聊天應(yīng)用程序。此程序可以和所有連接到Openfire服務(wù)器的應(yīng)用進(jìn)行通信、發(fā)送消息。如果要運(yùn)行本程序還需要一個(gè)聊天服務(wù)器Openfire2012-08-08
客戶端的抖動(dòng),快速操作,網(wǎng)絡(luò)通信或者服務(wù)器響應(yīng)慢,都容易造成服務(wù)器重復(fù)處理,這篇文章主要給大家介紹了關(guān)于jquery項(xiàng)目中如何防重復(fù)提交的相關(guān)資料,需要的朋友可以參考下2021-11-11
jQuery EasyUI 獲取tabs的實(shí)例解析
左邊tree，右邊tabs。點(diǎn)擊tree增加相應(yīng)的tabs。下面通過一段代碼給大家解析，需要的朋友參考下吧2016-12-12
jquery獲取對(duì)象的方法足以應(yīng)付常見的各種類型的對(duì)象
獲取對(duì)象是比較常見的操作了，因?yàn)橄胍僮饕粋€(gè)對(duì)象之前，一定要先獲取，這是必須的，下面整理了常見對(duì)象的獲取方法，希望對(duì)大家有所幫助2014-05-05
跟著JQuery API學(xué)Jquery 之三 篩選
跟著JQuery API學(xué)Jquery 之三 篩選，相當(dāng)于條件判斷類型。2010-04-04
jQuery實(shí)現(xiàn)查找鏈接文字替換屬性的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)查找鏈接文字替換屬性的方法,可實(shí)現(xiàn)針對(duì)鏈接文字的查找及鏈接屬性進(jìn)行替換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果
最近基于jQuery和Bootstrap框架實(shí)現(xiàn)了一個(gè)仿知乎動(dòng)態(tài)列表的前端效果，基本實(shí)現(xiàn)了和知乎動(dòng)態(tài)列表相同的效果，下面小編通過本文給大家分享實(shí)現(xiàn)思路及代碼，對(duì)bootstrap 實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果感興趣的朋友一起看看吧2016-11-11
JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
本文主要分享了基于JQuery的獲取鼠標(biāo)進(jìn)入和離開容器方向的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值。下面跟著小編一起來看下吧2016-12-12
基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)類似跑馬燈的效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)效果類似跑馬燈,需要的朋友可以參考下2014-06-06