div alert html,基于jQuery的弹出消息插件 DivAlert之旅(一)
想着自己学习Javascript,以及Ajax、jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧。。。
这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西。
首先,我们来定义一下一些最基本的参数:
插件初始化
(function($) {
$.jDivAlert = function(o) {
//设置插件基本信息
var options = o || {};
options.width = o.width || 300;
options.height = o.height || 200;
options.title = o.title || "提示标题";
options.content = o.content || "提示内容";
随后定义一个创建页面元素的方法,这样可以重用,简写js:
function createElement(obj) {
return $(document.createElement(obj));
}
创建背景div及设定样式
var $bgDiv = createElement('div')
.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': '9999', 'filter': 'alpha(opacity=70)', 'backgroundColor': '#999', 'opacity': '0.7', 'width': document.documentElement.clientWidth + "px", 'height': document.documentElement.clientHeight + "px" })
.appendTo('body');
创建提示div
var $outDiv = createElement('div')
.css({ 'position': 'absolute', 'top': ($(window).height() - options.height) / 2 + $(window).scrollTop() + 'px', 'left': ($(window).width() - options.width) / 2 + $(window).scrollLeft() + 'px', 'border': '1px solid #cef', 'zIndex': '10000', 'width': options.width + 'px', 'height': options.height + 'px', 'overflow': 'hidden' })
.appendTo('body');
创建提示div的标题部分
var $titDiv = createElement("div")
.css({ 'textAlign': 'left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' })
.html(options.title)
.appendTo($outDiv);
创建提示div的内容部分
var $conDiv = createElement("div")
.css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() })
.html(options.content)
.appendTo($outDiv);
创建关闭按钮
var $clsBtn = createElement("img")
.attr('src', 'del.gif')
.css({ 'cursor': 'pointer', 'float': 'right' })
.click(close)
.appendTo($titDiv);
创建弹出框关闭事件:
function close() {
$bgDiv.fadeOut();
$outDiv.fadeOut();
}
}
})(jQuery);
要看到使用效果,在页面script部分加入如下代码即可(当然jQuery库文件不可少啊,现在最新版是1.4.2,可以去官网http://www.jQuery.com下载):
$(document).ready(function() {
$.jDivAlert({
width: 300,
height: 300
});
});
貌似还有很多功能有待完善,哎。。继续努力。。。
打包下载地址
基于jQuery的弹出消息插件 DivAlert之旅(一)
基于jQuery的消息提示插件 DivAlert之旅(二)
div alert html,基于jQuery的弹出消息插件 DivAlert之旅(一)相关推荐
- html登入弹框插件,基于jQuery的弹出框插件
html如下: $(function() { $("#btn01").popwin({ element: "#box01", title: "请填写以 ...
- html遮罩提示框代码,基于jQuery实现弹出可关闭遮罩提示框实例代码
jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实 ...
- jquery easyui 弹出消息框
PS:easyui 弹出消息框 系项目中实践中遇到的问题,特此转载收藏 <html> <head> <!-- 导入easyui插件的js和css样式; --> &l ...
- jQuery的弹出窗口插件colorbox
支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观. 不需要更改 ColorBox 的 javascript 文件就可以重新设定 ...
- CSS3动画过渡的jquery动态弹出框插件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84111711 在线演示 本地下载
- messagrbox自定义按钮c语言,基于dialogbox修改可自定义按钮及事件的弹出框插件
插件描述:基于dialogbox1.0修改可自定义按钮及事件的弹出框插件,每个按钮可绑定单独的触发事件,并且能支持将弹出框作为一个表单来填入数据并获取 $('body').dialogbox({ ty ...
- 实用的 jquery 弹出窗口 插件winbox
实用的 jquery 弹出窗口 插件winbox 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 应用演示: ...
- layer——极简的jquery弹出层插件
官网:http://layer.layui.com/ 作者:贤心 jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...
- 弹出消息对话框ScriptManager
//直接调用WebMessageBox方法#region 弹出消息对话框/// <summary>/// 弹出消息对话框/// </summary>/// <param ...
最新文章
- js页面跳转或重定向
- 把用户体验设计放到底层逻辑架构设计的前面去做
- golang中的goredis
- [YTU]_2639 ( 改错题:类中私有成员的访问)
- JZOJ 5952. 【NOIP2018模拟11.5A组】凯旋而归
- C#IList 取区间数据
- #6278. 数列分块 2 分块 + 块内二分
- 前端学习(3020):vue+element今日头条管理--创建路由和配置路由
- 2017-2018-2 1723《程序设计与数据结构》每周成绩 (更新完毕)
- C语言存储地址规律,一数组按顺序序存放,插入一个数,按原来排序规律放在相应位置...
- go语言中错误处理方式
- 设计模式微课版来啦——《设计模式(第2版)》
- 高效能程序员的修炼札记:创建和管理社区
- android 的一些编译问题
- 多线程不能不知道的之单线程和多线程的比较
- 查看电脑系统是否永久激活
- 树莓派安装Ubuntu系统详细过程
- TCP的三次握手,四次挥手
- java获取每周的周一到周日时间节点
- 安卓在将来的发展趋势
热门文章
- 我的机器人现在无处可去。 无家可归。 无服务器。
- Java的String.format可以静态导入
- jpa获取session_JPA 2 | 获取联接以及我们是否应该使用它们
- java堆内存和堆外内存_Java堆空间,本机堆和内存问题
- guava 并发同步_Google Guava –与Monitor同步
- couchbase_Couchbase:使用Twitter和Java创建大型数据集
- 在Gradle 2.13中更好地处理“在插件Y上找不到属性X”
- Java TDD简介–第1部分
- 使用活动记录执行CRUD
- 不可将您的方法命名为“等于”