快捷導(dǎo)航

簡單的Jquery遮罩層代碼實(shí)例

更新時(shí)間：2013年11月14日 16:33:42 作者：

這篇文章介紹了簡單的Jquery遮罩層代碼實(shí)例，有需要的朋友可以參考一下

Css代碼

 #brg
{
 width: 100%;
 height: 100%;
 background: #333;
 position: absolute;
 top: 0;
 left: 0;
 filter: alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;
 display: none;
}
#showdiv
{
 width: 100%;
 height: auto;
 position: absolute;
 left: 300px;
 top: 150px;
 z-index: 330;
 display: none;
}
#testdiv
{
 width: 800px;
 height: auto;
 margin: 0 0;
 border: 1px solid #4d4d4d;
 background: #f2f2f2;
}
#close
{
 width: 200px;
 height: 27px;
 line-height: 27px;
 font-size: 14px;
 font-weight: bold;
 border: 1px solid #4d4d4d;
 text-align: center;
 cursor: pointer;
 margin: 0 auto;
 background: #333;
 color: #fff;
}

Html 代碼

復(fù)制代碼代碼如下:

要顯示的內(nèi)容

</div>
</div>

Jquery 代碼

復(fù)制代碼代碼如下:

 $(document).ready(function() {
            var bheight = document.body.clientHeight;
            $("#btnAdd").click(function() {
                $("#brg").css("display", "block");
                $("#showdiv").css("display", "block");
                $("#brg").css("height", document.body.scrollHeight);
                $("#showdiv").css("top", document.body.scrollTop + 100);
            });
            $("#close").click(function() {
                $("#brg").css("display", "none");
                $("#showdiv").css("display", "none");
            });
        });

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)CheckBox全選、全不選功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)CheckBox全選、全不選功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-01-01
關(guān)于jQuery庫沖突的完美解決辦法
在使用jQuery開發(fā)的時(shí)候，可能還會(huì)使用到其他的JS庫，比如Prototype，但多庫共存時(shí)可能會(huì)發(fā)生沖突，下面這篇文章主要給大家介紹了關(guān)于jQuery庫沖突的完美解決辦法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05
利用javascript/jquery對(duì)上傳文件格式過濾的方法
jquery中對(duì)上傳文件格式過濾的方法,需要的朋友參考下。
2009-07-07
jquery mobile changepage的三種傳參方法介紹
本來覺得changePage 那么多option,傳幾個(gè)參數(shù)應(yīng)該沒問題結(jié)果翻遍國內(nèi)外網(wǎng)站,基本方法只有三種，下面與大家分享下，感興趣的朋友可以參考下
2013-09-09
jQuery封裝animate.css的實(shí)例
下面小編就為大家分享一篇jQuery封裝animate.css的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
讀jQuery之八包裝事件對(duì)象
由于各個(gè)瀏覽器中原生事件對(duì)象的差異性，多數(shù) JS庫/框架都或多或少的對(duì)原生事件對(duì)象進(jìn)行了修復(fù)及包裝。
2011-06-06
Jquery使用Firefox FireBug插件調(diào)試Ajax步驟講解
本文介紹Jquery下的Ajax調(diào)試方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，還有諸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更為簡便的方法
2013-12-12
checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
2009-12-12
利用js(jquery)操作Cookie的方法說明
本篇文章主要是對(duì)利用js(jquery)操作Cookie的方法進(jìn)行了詳細(xì)的說明介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jquer之a(chǎn)jaxQueue簡單實(shí)現(xiàn)代碼
手頭不是很忙，突然想到了ajax queue這個(gè)概念，之前貌似有看技術(shù)文章中提到過這個(gè)，就想著用jquery來實(shí)現(xiàn)一下，思想比較簡單
2011-09-09