使用jquery制作彈出框效果
非常不錯(cuò)的國(guó)產(chǎn)JS彈出框插件,由前端工程師alien開發(fā),提供多種類型的自定義對(duì)話框,使用方法簡(jiǎn)單,瀏覽器兼容性好,支持的彈出框模式有:
alert:普通提示(警告)對(duì)話框
confirm:詢問(確認(rèn))對(duì)話框
message:簡(jiǎn)單消息對(duì)話框(無title、無按鈕)
iframe:在對(duì)話框中嵌入一個(gè)iframe
tip:帶有小三角指向的小tip
dialog:最基礎(chǔ)的自定義對(duì)話框
var jDialogId = [];
(function ($) {
$.jDialog = function (options) {
var id = parseInt(Math.floor(Math.random() * 1000 + 1));
while ($.inArray(id, jDialogId) != -1) {
id = parseInt(Math.floor(Math.random() * 1000 + 1));
}
jDialogId.push(id);
var defaults = {
title:"",
content: "這是一個(gè)JasUI-Dialog插件",
width: 350,
height: 0,
timer: 0,
showbuttons:false,
buttons: [],
okval: "確認(rèn)",
ok: function () { return false;},
cancelval: "取消",
cancel: function () { return false; },
showclose:true,
close: function () { },
theme:""
};
var options = $.extend(defaults, options);
var _objdiv = "<div id='j-dialog-" + id + "' class='j-dialog ";
if (options.theme != "") {
_objdiv = _objdiv + "j-dialog-" + options.theme + "'>";
} else {
_objdiv = _objdiv + "'>";
}
_objdiv = _objdiv + "<div class='j-dialog-header'>";
if (options.showclose) {
_objdiv = _objdiv + "<a href='javascript:void(0)' class='j-close j-dialog-close'></a>"
}
if (options.title != "") {
_objdiv = _objdiv + "<h5 class='j-dialog-title'>" + options.title + "</h5>";
}
_objdiv = _objdiv + "</div>";
_objdiv = _objdiv + "<p class='j-dialog-content'>" + options.content + "</p>";
if (options.showbuttons) {
_objdiv = _objdiv + "<div class='j-dialog-footer'>";
$.each(options.buttons,function(i,value) {
_objdiv = _objdiv + "<a class='j-button' data-id='" + i + "'>" + value.title + "</a>";
})
_objdiv = _objdiv + "<a class='j-button j-button-primary j-dialog-ok'>" + options.okval + "</a>";
_objdiv = _objdiv + "<a class='j-button j-dialog-cancel'>" + options.cancelval + "</a>";
_objdiv = _objdiv + "</div>";
};
_objdiv=_objdiv+"</div>";
$("body").append(_objdiv);
var _obj = $('#j-dialog-' + id)
if (options.height>0) {
_obj.css("height", options.height);
}
_obj.css("width", options.width);
_obj.css("margin-top", '-' + (options.height / 2) + 'px');
_obj.css("margin-left", '-' + (options.width / 2) + 'px');
_obj.animate({ top: '30%',opacity:1 }, 0);
if (options.showclose) {
_obj.find('.j-dialog-close').on('click', function () {
$.jDialogRemove(id, options.close);
})
_obj.find('.j-dialog-ok').on('click', function () {
if (!options.ok()) {
$.jDialogRemove(id, options.close);
}
})
_obj.find('.j-dialog-cancel').on('click', function () {
if (!options.cancel()) {
$.jDialogRemove(id, options.close);
}
})
}
if (options.showbuttons) {
$.each(options.buttons, function (i, value) {
_obj.find("[data-id=" + i + "]").on('click', function () {
if (!value.callback()) {
$.jDialogRemove(id, options.close);
}
})
})
};
if (options.timer> 0) {
setTimeout(function () {
$.jDialogRemove(id,options.close);
}, options.timer);
}
return id;
},
$.jDialogRemove = function (id, callback) {
if ($.inArray(id, jDialogId)!=-1) {
jDialogId.splice($.inArray(id, jDialogId), 1);
$('#j-dialog-' + id).animate({ top: '0', opacity: 0 }, 500, function () {
$('#j-dialog-' + id).remove();
if (callback) {
callback();
}
});
}
},
$.jTip = function (options) {
var defaults = {
content: "這是一個(gè)JasUI-Dialog插件",
width: 200,
timer: 0,
showclose: false,
close: function () { },
theme: ""
};
var options = $.extend(defaults, options);
$.jDialog(options);
},
$.jFloatText = function (txt,color,posX,posY) {
var $i = $("<b>").text(txt);
var x = '50%', y = '40%';
var _color = '#E94F06';
if (color) {
_color= color;
}
if (posX) {
x = posX;
}
if (posY) {
y = posY;
}
$i.css({ top: 200, left: x, position: "absolute", color: "#E94F06" });
$("body").append($i);
$i.animate({ top: 20, opacity: 0}, 1500, function () {
$i.remove();
});
}
})(jQuery);
以上所述就是本文的全部?jī)?nèi)容了,希望能夠?qū)Υ蠹沂炀毷褂胘Query有所幫助。
- 使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁效果的方法
- jquery中ajax使用error調(diào)試錯(cuò)誤的方法
- jQuery使用load()方法載入另外一個(gè)網(wǎng)頁文件內(nèi)的指定標(biāo)簽內(nèi)容到div標(biāo)簽的方法
- jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
- jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法
- jQuery使用addClass()方法給元素添加多個(gè)class樣式
- jQuery使用before()和after()在元素前后添加內(nèi)容的方法
- jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值用法實(shí)例
- jQuery獲取json后使用zy_tmpl生成下拉菜單
- 使用Jquery實(shí)現(xiàn)每日簽到功能
- jQuery彈出層插件Lightbox_me使用指南
- jQuery驗(yàn)證插件validation使用指南
- Jquery 效果使用詳解
相關(guān)文章
jquery綁定原理 簡(jiǎn)單解析與實(shí)現(xiàn)代碼分享
下面的內(nèi)容只是自己的一些理解,水平有限,難免有錯(cuò),望指正2011-09-09
jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法,涉及jQuery操作隨機(jī)數(shù)及頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的方法,涉及jQuery功能的擴(kuò)展技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02

