足球游戏_中国足彩网¥体育资讯$

使用jquery制作弹出框效果
来源:易贤网 阅读:870 次 日期:2015-04-08 14:07:18
温馨提示:易贤网小编为您整理了“使用jquery制作弹出框效果”,方便广大网友查阅!

非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有:

alert:普通提示(警告)对话框

confirm:询问(确认)对话框

message:简单消息对话框(无title、无按钮)

iframe:在对话框中嵌入一个iframe

tip:带有小三角指向的小tip

dialog:最基础的自定义对话

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: "这是一个JasUI-Dialog插件",

width: 350,

height: 0,

timer: 0,

showbuttons:false,

buttons: [],

okval: "确认",

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: "这是一个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);

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
易贤网手机网站地址:使用jquery制作弹出框效果
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标