JQuery框架中使用blockUI制作自定义的漂亮的网页提示框
一、介绍blockUI
它是Jquery框架的一个插件,专门用来做提示框、模态窗口的
地址:http://www.malsup.com/jquery/block/
具体的使用方法和demo里面都写得很清楚,我不再一一陈述
二、重写javascript中的alert,使得所有调用alert的地方都有统一的样式
这里我提供一个js文件
$.blockUI.defaults.overlayCSS.backgroundColor="#d5d5d5";
$.blockUI.defaults.pageMessageCSS.border="none";
//$.blockUI.defaults.pageMessageCSS.backgroundColor="#D6D6D6";
$.blockUI.defaults.pageMessageCSS.margin="-50px 0 0 -200px";
$.blockUI.defaults.pageMessageCSS.width="400px";
$.blockUI.defaults.overlayCSS.cursor='normal';
function Confirmer(title,message,callback,callback1,txt1,txt2)...{
if(!txt1)...{
txt1 = "确定";
}
if(!txt2)...{
txt2 = "取消";
}
var dhtml="";
dhtml+="<div class='DialogContainer'>";
dhtml+=" <div class='Title'>"+title+"</div>";
dhtml+=" <div class='Content'>"+message+"</div>"
dhtml+=" <div class='buttons'>";
dhtml+=" <input type='button' value='"+txt1+"' id='btn_Confirmer_OK'/>"
dhtml+=" <input type='button' value='"+txt2+"' id='btn_Confirmer_CANCEL'/>"
dhtml+=" </div>"
dhtml+="</div>";
$.blockUI(dhtml);
$("#btn_Confirmer_OK").click(function()...{
$.unblockUI();
setTimeout(function()...{
$(callback);
},500);
});
$("#btn_Confirmer_CANCEL").click(function()...{
$.unblockUI();
if(callback1)...{
$(callback1);
}
});
}
function Alert(message,callback)...{
var dhtml="";
dhtml+="<div class='DialogContainer'>";
dhtml+=" <div class='Title'>消息框</div>";
dhtml+=" <div class='Content'>"+message+"</div>"
dhtml+=" <div class='buttons'>";
dhtml+=" <input type='button' value='确定' id='btn_alert_Ok' />";
dhtml+=" </div>"
dhtml+="</div>";
$.extend($.blockUI.defaults.pageMessageCSS, ...{ border:'solid 1px #7199b1'});
$.blockUI(dhtml);
$("#btn_alert_Ok").focus();
$("#btn_alert_Ok").click(function()...{
$.unblockUI();
setTimeout(function()...{
eval(callback);
},500);
});
}
这里我故意把alert改为了大写的Alert,因为我觉得如果重写以前的alert方法,调试不太方便;
三、在页面调用的时候需要引用的资源文件
<link href="/css/DialogUI.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/blockUI.js" ></script>
<script type="text/javascript" src="/js/commondialog.js" charset="gb2312"></script>
<script src="/js/jquery-1.2.1.js" type="text/javascript"></script>
四、分析css文件
div.blockUI{...}{
border:1px solid red;
background-color:#335577;
}
//整体的DIV层样式
.DialogContainer{...}{
width:400px;
height:200px;
cursor:default;
}
//提示框里面的样式
.DialogContainer .Title{...}{
background-color:#7199b1;
color:white;
font:caption;
text-align:left;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
//标题样式
.DialogContainer .Content{...}{
font-size:12px;
line-height:25px;
height:160px;
padding-top:20px;
padding-left:15px;
text-align:left;
}
//内容样式
.DialogContainer .buttons{...}{
text-align:right;
padding-right:20px;
padding-bottom:10px;
}
//按钮样式
.DialogContainer .buttons input{...}{
margin-left:20px;
text-align:center;
background-color: #ffffff;
border-right: #7199b1 2px solid;
padding-right: 8px;
border-top: #7499ae 1px solid;
padding-left: 8px;
font-size: 14px;
background-image: url(../images/anniu/out.gif);
border-left: #7499ae 1px solid;
cursor: hand;
color: #053152;
padding-top: 5px;
padding-bottom: 0px;
border-bottom: #7199b1 2px solid;
}
转载于:https://www.cnblogs.com/ajuanabc/archive/2009/07/29/2463061.html
JQuery框架中使用blockUI制作自定义的漂亮的网页提示框相关推荐
- vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
- laui框架表单大小修改两个属性改变表格提示框(layui-form-label)的大小
laui框架表单大小修改两个属性改变表格提示框(layui-form-label)的大小 (1)直接在html界面上的head中修改表格的属性就好了(2)(3)是layui框架的属性查找的方法 < ...
- QT 自定义加载等待(Loading)提示框
QT自定义加载等待提示框 一.效果展示 二.源代码 #ifndef LOADINGDIALOG_H #define LOADINGDIALOG_H #include <QMovie> #i ...
- php自定义扩展函数,Laravel框架中扩展函数、扩展自定义类的方法
一.扩展自己的类 在app/ 下建立目录 libraries\class 然后myTest.php 类名格式 驼峰 myTest 复制代码 代码如下: class myTest { public f ...
- bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)
我需要完成的效果: 1.在顶级页面打开模态框,并且遮罩层也要再顶级页面 2.单击遮罩层部分,模态框不关闭 问题描述: 不知为什么,可能是bootstrap前端框架添加遮罩层的一些问题.通过子页面在顶级 ...
- Qt自定义一个简单的ToolTip提示框
实现过程 因为 QToolTip 自定义样式不大方便,而且半透明也没法设置,所以需要自定义.而且,Qt 中的顶层 widget 好像默认是不支持透明样式的,可以设置: setWindowFlags(Q ...
- 计算机网络中常用设备处于脱机状态,win7网络正常网页提示处于脱机状态该怎么解决?...
据了解,win7系统用户平时使用电脑过程中花费时间最多是浏览网页.在浏览网页时有时候会时不时的弹出脱机提示:请求的网页在脱机状态下无法使用.要查看该页请单击"连接".可是我们的网络 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
最新文章
- 电子白板 矢量 编码_当涉及白板编码采访时,请记住准备
- 支持者基于BCH提出众多新概念,推动BCH创新
- 为什么delete表,还会占磁盘空间?
- android 验证码图片识别_图片验证码的识别技术
- windows 2008 终端服务器配置,windows 2008终端服务器设置
- 如何在电话中交谈_11
- flink源码分析_Flink源码分析之深度解读流式数据写入hive
- python excel填充颜色_python实现xlwt xlrd 指定条件给excel行添加颜色
- 弹出确认提示框,确定,取消
- 豪迪QQ群发通杀破解补丁使用教程
- K8s入门:Docker,kubectl,Kind的安装
- Kafka学习笔记: Kafka 百惑梳理
- 嵌入式:Altium Designer18提升速度的操作(画开发板笔记)
- 【目录】博客目录 | 先点这里
- 如何设置select-option的多项起始默认值
- 大头儿子小头爸爸计算机音乐,幼儿园大班音乐教案:《大头儿子小头爸爸》插曲...
- MyBatis学习笔记-源码分析篇
- 浅谈win10固定到任务栏别样方法
- Pycharm中安装GDAL库
- 大学生旅游网页制作作业5页 西柏坡介绍网页成品源代码下载 河北红色旅游景点网页设计