加载动画、提示框动态添加（普通提示框、确认提示框、消息提示框）
2016-12-05 16:11
477 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css">
<script src="jquery-1.11.1.js"></script>
<script src="js.js"></script>
</head>
<body>
<input type="button" value="执行加载动画" class="btn1">
<input type="button" value="打开一般提示框" class="btn2">
<input type="button" value="打开确认提示框" class="btn3">
<input type="button" value="打开消息提示框" class="btn4">
<script>
/* ****************加载动画***********加载动画**********加载动画*********加载动画*******************/
$('.btn1').click(function () {
openLoadingLayer(); //执行加载动画
setTimeout("closeLoadingLayer()",3000); /*加载动画执行3秒后自动关闭 */
});
/* ****************一般提示框***********一般提示框**********一般提示框**********一般提示框*******************/
x_addPrompt();//添加提示框
$('.btn2').click(function () {
x_showPrompt('输入有误，请重新输入！'); /*提示框显示*/
x_settimeHidePrompt(5000); /*提示框定时关闭*/
});
x_clickhidePrompt(); /*提示框点击关闭*/
/* ********************************************************************************/
/* ****************确认提示框***********确认提示框**********确认提示框**********确认提示框*******************/
x_addSurePrompt();//添加确认提示框
$('.btn3').click(function () {
x_showSurePrompt('输入有误，请重新输入！'); /*确认提示框显示*/
});
x_clickhideSurePrompt(); /*确认提示框点击关闭*/
$('.x_SureProMask').find('.x_prompt_ok').click(function(){
x_hideSurePrompt();
alert('确定！')
});
/* ****************消息提示框***********消息提示框**********消息提示框**********消息提示框*******************/
x_addMagPrompt(); //添加消息提示框
$('.btn4').click(function(){
x_showMagPrompt('成功登录！');//添加消息提示框
});
x_settimeHideMagPrompt(3000); /*加载动画执行3秒后自动关闭 */
x_clickhideSurePrompt();
</script>
</body>
</html>
——————————————————————————————————————————————————————————————————————————————————————————————
下面为：js.js内容：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：
/*添加加载动画*/
var loadingLayer;
function openLoadingLayer() {
loadingLayer = $('<div class="loadingLayer"></div>');
loadingLayer.appendTo('body').show();
}
function closeLoadingLayer() {
if(loadingLayer) {
loadingLayer.remove();
}
};
/*********一般提示框**************一般提示框***************一般提示框*************/
/*添加提示框*/
var x_noSureprompt;
function x_addPrompt() {
x_noSureprompt = $('<div class="x_mask_box x_noSureProMask"><div class="x_mask">' +
'<div class="x_prompt_box"><div class="x_prompt_title"><h3>系统提示</h3><span class="x_prompt_cancel"></span>' +
'<div class="x_prompt_cont"><p class="x_prompt_text"></p><span class="x_prompt_sure">确定</span></div></div></div></div>');
x_noSureprompt.appendTo('body');
}
/*提示语编辑 提示框显示*/
function x_showPrompt(promptText) {
if(x_noSureprompt) {
$('.x_noSureProMask').find('.x_prompt_text').text(promptText);
$('.x_noSureProMask').show();
}
};
/*提示框隐藏*/
function x_hidePrompt() {
if(x_noSureprompt) {
$('.x_noSureProMask').hide();
}
};
/*提示框点击关闭*/
function x_clickhidePrompt() {
$('.x_noSureProMask').find('.x_prompt_cancel,.x_prompt_sure').click(function () {
x_hidePrompt();
});
};
/*提示框定时关闭*/
function x_settimeHidePrompt(timehide){
setTimeout('x_hidePrompt()',timehide);
}
/*************************************************************************/
/**********确认提示框***************确认提示框******************确认提示框*************/
/*添加确认提示框*/
var x_Sureprompt;
function x_addSurePrompt() {
x_Sureprompt = $('<div class="x_mask_box x_SureProMask"><div class="x_mask"><div class="x_prompt_box"><div class="x_prompt_title"><h3>系统提示</h3>' +
'<span class="x_prompt_cancel"></span><div class="x_prompt_cont"><p class="x_prompt_text"></p><span class="x_prompt_no">取消</span>' +
'<span class="x_prompt_ok">确定</span></div></div></div></div>');
x_Sureprompt.appendTo('body');
}
/*提示语编辑 提示框显示*/
function x_showSurePrompt(SurepromptText) {
if(x_Sureprompt) {
$('.x_SureProMask').find('.x_prompt_text').text(SurepromptText);
$('.x_SureProMask').show();
}
};
/*提示框隐藏*/
function x_hideSurePrompt() {
if(x_Sureprompt) {
$('.x_SureProMask').hide();
}
};
/*提示框点击关闭*/
function x_clickhideSurePrompt() {
$('.x_SureProMask').find('.x_prompt_cancel,.x_prompt_no').click(function () {
x_hideSurePrompt();
});
};
/*提示框定时关闭*/
function x_settimeHideSurePrompt(timehideSure){
setTimeout('x_hideSurePrompt()',timehideSure);
}
/*******************************************************************/
/***************消息提示框*************消息提示框*************消息提示框*************/
/*添加消息提示框*/
var x_Magprompt;
function x_addMagPrompt() {
x_Magprompt = $('<div class="x_mgeProMask"><div class="x_mask">' +
'<div class=" x_magprompt_box"><div class="x_prompt_title">' +
'<h3>系统提示</h3><span class="x_prompt_cancel"></span>' +
'<div class="x_prompt_cont"><p class="x_prompt_text">' +
'</p></div>' +
'</div></div></div></div>');
x_Magprompt.appendTo('body');
}
/*提示语编辑 消息框显示*/
function x_showMagPrompt(MagpromptText) {
if(x_Magprompt) {
$('.x_mgeProMask').find('.x_prompt_text').text(MagpromptText);
$('.x_mgeProMask').show();
$('.x_magprompt_box').slideDown(2000);
}
};
/*消息框隐藏*/
function x_hideMagPrompt() {
$('.x_magprompt_box').slideUp(2000);
setTimeout(function () {
$('.x_mgeProMask').hide();
},2000)
};
/*消息框点击关闭*/
function x_clickhideSurePrompt() {
$('.x_mgeProMask').find('.x_prompt_cancel').click(function () {
x_hideMagPrompt();
});
};
/*消息框定时关闭，当鼠标经过的时候，定时器取消，当鼠标离开的时候，定时器开启*/
function x_settimeHideMagPrompt(timehideMag){
var timer=null;
$('.x_magprompt_box').mouseout(function () {
timer = setTimeout('x_hideMagPrompt()',timehideMag);
}).mouseover(function(){
clearTimeout(timer);
})
}
——————————————————————————————————————————————————————————————————————————————————————————————
下面为css.css内容：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：
/***** 加载动画 *****/
.loadingLayer{position:absolute;top:0;left:0;height:100%;width:100%;z-index:999;
background:#000;opacity: 0.2; filter: alpha(opacity = 20);
background-image:url(imgs/loading.gif);background-position:center;
background-repeat:no-repeat;background-attachment:fixed;
display:none;}
/***** 遮罩 *****/
.x_mask_box{width:100%; height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,0.2);
background:url("imgs/mask.png")\9;z-index:999;display:none;}
.x_prompt_box{width:400px;height:200px;background:#ffffff;border-radius:6px;
position:absolute;top:50%; left:50%; margin-left:-200px;margin-top:-100px;overflow:hidden;}
.x_mgeProMask{width:100%;height:100%;position:absolute;top:0;left:0;
background:rgba(0,0,0,0.2);background:url("imgs/mask.png")\9;z-index:999;display:none;}
.x_magprompt_box{ width:400px;height:200px;background:#ffffff;border-radius:6px;
position:absolute;bottom:0; right:10px;overflow:hidden;display:none;}
.x_prompt_title{height:40px;padding-left:20px;border-bottom:2px solid #096075;
background:#e6e6e6;position: relative;}
.x_prompt_title h3{font-size:16px;color:#096075;margin-top:0;line-height:40px;}
.x_prompt_cancel{width:24px;height:24px;cursor: pointer;
background: url("imgs/cancel.png") no-repeat;
position: absolute;right:0;top:0;}
.x_prompt_cont{position: relative;height:158px;}
.x_prompt_cont .x_prompt_text{line-height:140px;text-align:center;}
.x_prompt_cont .x_prompt_sure, .x_prompt_cont .x_prompt_no,.x_prompt_cont .x_prompt_ok{position: absolute;bottom:20px;
width:50px;height: 26px;border-radius:5px;color:#ffffff;
font-size: 14px;line-height:26px;text-align:center;cursor: pointer;}
.x_prompt_cont .x_prompt_sure, .x_prompt_cont .x_prompt_ok{background:#1a9ebf;right:20px;}
.x_prompt_cont .x_prompt_no{background:#cccccc;right:90px;color:#1a1a1a;}
.hide{display:none;}
.show{display:block;}效果图显示：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 长按power键弹出关机菜单，点击关机会弹出提示框，点击重启没有提示框确认直接进入重启状态，添加确认提示框
- 第三方登录、动态的加载提示和点击效果、属性动画ObjectAnimator心得
- [flash]准备添加动态加载flash，防止浏览者下载
- 添加删除、更新按钮的提示确认信息，以及DATAGRID的添加、插入、更新、删除操作。
- ASP.NET中为GridView添加删除确认提示框
- ComponentArt 动态加载的TreeView， 添加一个新节点后，新节点为什么在页面中不会显示？
- 动态的添加消息
- 在VB中动态添加可响应消息的控件
- 高技术! 动态加载切换Ajax模式!! , 动态添加ScriptManager,UpdatePanel
- ajax 动态获取！实现站内消息提示！
- 为Infragistics UltraWebGrid 行中的按钮添加操作确认提示
- 给CheckBoxList1添加动态提示
- DataGrid，GridView和DetailsView中添加删除确认提示
- VB.NET动态加载C#或VB.NET生成的DLL文件调用动画教程[黑白智慧写](动态调用DLL).txt
- 今天要为自己的网站添加一个动态检索信息的下拉提示框，这个是在网上找的例子。
- 为Infragistics UltraWebGrid 行中的按钮添加操作确认提示
- 消息处理：利用控件的动态派生[RunTime]，为控件添加该控件未定义的消息映射
- DataGrid，GridView和DetailsView中添加删除确认提示
- DataGrid，GridView和DetailsView中添加删除确认提示
- vs2005在视图上为控件或菜单添加成员变量/消息时提示出错