基于Jquery的開(kāi)發(fā)個(gè)代陰影的對(duì)話框效果代碼
<script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#open").click(function() {
openDialog(a1); //調(diào)用,直接寫(xiě)上DIV的ID即可
});
});
var openDialog = function(o) {
var dialog = new zzlDialog(o);
dialog.open();
}
var zzlDialog = function(o) {
this.init = function() {
/* 對(duì)話框初始化 */
var XBox = '\
<div id="mask"/>\
<div id="wai">\
</div>\
<div id="nie">\
<table>\
<thead>\
<tr>\
<td>\
陰影彈出框\
</td>\
<td>\
</td>\
</tr>\
</thead>\
<tbody>\
<tr>\
<td colspan="2">' + $(o).html() + '\
</td>\
</tr>\
</tbody>\
</table>\
</div>\
';
$(document.body).append(XBox);
};
this.cssInit = function() {
/* css初始化 */
$("#wai").css({ "padding": "10px", "background": "#000", "filter": "Alpha(Opacity='50')", "position": "absolute" });
$("#nie").css({ "position": "absolute", "z-index": "1000" });
$("#nie>table").css({ "border": "1px solid rgb(55,119,188)", "border-collapse": "collapse", "background": "#fff" });
$("#nie>table>thead>tr").css({ "background": "rgb(0,94,172)", "color": "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" });
$("#nie>table").find("td").css({ "padding": "5"});
/* 內(nèi)部主體定位 */
$("#nie").css({ "top": "50px" });
$("#nie").css({ "left": "50px" });
/* 關(guān)閉按鈕 */
var $close = $("#nie>table>thead").find("td").next("td");
$close.html("<span>關(guān)閉</span>");
$close.css({ "text-align": "right", "padding-right": "5px" });
$close.find("span").css({ "font-weight": "normal", "cursor": "hand" });
$close.find("span").click(function() { new zzlDialog().closes(); });
/* 外部陰影添加 ,及位置和大小由內(nèi)部?jī)?nèi)容來(lái)控制 */
$("#wai").css({ "width": ($("#nie>table").width() + 16) + "px", "height": ($("#nie>table").height() + 16) + "px" });
$("#wai").css({ "top": $("#nie").position().top - 8 + "px", "left": $("#nie").position().left - 8 + "px", "z-index": $("#nie").css("z-index") });
// $("#wai").corner("5px"); //圓角
};
this.open = function() {
this.init();
this.cssInit();
this.shadow();
};
this.shadow = function() {
this.event_b_show();
if (window.attachEvent) {
window.attachEvent('onresize', this.event_b);
window.attachEvent('onscroll', this.event_b);
}
else {
window.addEventListener('resize', this.event_b, false);
window.addEventListener('scroll', this.event_b, false);
}
};
this.event_b = function() {
var oShadow = $('#mask');
if (oShadow.css("display") != "none") {
if (this.event_b_show) {
this.event_b_show();
}
}
};
this.closes = function() {
var oShadow = $('#mask');
oShadow.css({ 'display': 'none' });
$("#wai").remove();
$("#nie").remove();
};
this.event_b_show = function() {
var oShadow = $('#mask');
oShadow.css({ 'position': 'absolute', 'display': '', 'opacity': '0.1', 'filter': 'alpha(opacity=10)', 'background': '#000' });
var sClientWidth = parent ? parent.document.body.offsetWidth : document.body.offsetWidth;
var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight;
var sScrollTop = parent ? (parent.document.body.scrollTop + parent.document.documentElement.scrollTop) : (document.body.scrollTop + document.documentElement.scrollTop);
oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth + "px", 'height': (sClientHeight + sScrollTop) + "px" });
- jquery 模式對(duì)話框終極版實(shí)現(xiàn)代碼
- Confirmer JQuery確認(rèn)對(duì)話框組件
- jQuery Dialog 彈出層對(duì)話框插件
- jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見(jiàn)使用問(wèn)題解答
- jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
- jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
- 學(xué)習(xí)從實(shí)踐開(kāi)始之jQuery插件開(kāi)發(fā) 對(duì)話框插件開(kāi)發(fā)
- 6款經(jīng)典實(shí)用的jQuery小插件及源碼(對(duì)話框/提示工具等等)
- Jquery實(shí)現(xiàn)頁(yè)面加載時(shí)彈出對(duì)話框代碼
- jquery ui對(duì)話框?qū)嵗a
- jQuery Mobile的loading對(duì)話框顯示/隱藏方法分享
- jquery刪除提示框彈出是否刪除對(duì)話框
- Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果示例代碼
- jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框(仿天貓的刪除對(duì)話框)
- JQuery彈出炫麗對(duì)話框的同時(shí)讓背景變灰色
- jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×
相關(guān)文章
調(diào)用DOM對(duì)象的focus使文本框獲得焦點(diǎn)
要使對(duì)象獲得焦點(diǎn),應(yīng)該調(diào)用DOM對(duì)象的focus方法,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-02-02jQuery中DOM常見(jiàn)操作實(shí)例小結(jié)
這篇文章主要介紹了jQuery中DOM常見(jiàn)操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)dom屬性操作、文檔操作等常用方法與操作技巧,需要的朋友可以參考下2019-08-08jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下2014-03-03jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
在ajax流行的時(shí)代,好像很少能看見(jiàn)傳統(tǒng)的同步提交表單方式了,是啊我們當(dāng)然要用更加給力的AJAX來(lái)實(shí)現(xiàn)異步無(wú)刷新提交表單,好了開(kāi)始今天的jQuery之旅吧,今天我們來(lái)利用jquery.validate和jquery.form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交 ,需要的朋友可以參考下2015-08-08JQuery對(duì)表單元素的基本操作使用總結(jié)
這篇文章主要介紹了JQuery對(duì)表單元素的基本操作使用總結(jié),需要的朋友可以參考下2014-07-07jQuery ajax請(qǐng)求struts action實(shí)現(xiàn)異步刷新
這篇文章主要為大家詳細(xì)介紹了JQuery ajax請(qǐng)求struts action實(shí)現(xiàn)異步刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的實(shí)例代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
jQuery lazyLoad.js插件 是一款基于jquery框架,可以“實(shí)現(xiàn)”圖片延遲加載的插件2013-08-08jQuery中校驗(yàn)時(shí)間格式的正則表達(dá)式小結(jié)
下面我介紹兩種校驗(yàn)時(shí)間格式的正則表達(dá)式實(shí)例了,這個(gè)其實(shí)可以直接叫js了,因?yàn)檎齽t功能jquery與js是一樣的,下面看實(shí)例2013-09-09