给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动...
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
- /*
- * 本插件基于JQUERY
- * Jquery版本: 1.7.2
- * Date:2012-06-28
- * Author:Kingwell
- * E-mail:jinhua.leng##gmail.com
- *
- * ---------- 接口说明: ----------
- *
- * --本插件采用kw命名空间,给Jquery添加静态方法,故调用方法为 $.kw.方法名 参数如下:
- * --调用方法:
- * --alert $.kw.alert(content,title,callBack)
- * --prompt $.kw.prompt(title,content,callBack)
- *
- *
- * -- title 标题名称 如果缺省,则为默认标题,如:"系统提示"
- * -- content 内容显示的内容
- * --callback 回调函数,单击确定后要执行的内容
- *
- *
- * --功能:类似系统功能,支持拖动,响应键盘事件,ESC退出,Enter确定,以及回调函数功能。
- *
- *
- */
- $(function () {
- $.kw = {
- title : "System information", //默认标题 可修改
- speed : 400, //默认速度 可修改
- buttonName : "OK", //确定按钮默认名称 可修改
- cancel : "Cancel", //取消按钮默认名称 可修改
- content : "Content",
- //移除遮盖层
- del : function () {
- $("#alert-layer").remove();
- },
- //响应ESC键盘退出
- esc : function () {
- $(document).keyup(function (event) {
- if (event.which == 27) {
- $.kw.del();
- }
- });
- },
- //内容显示功能
- alert : function (sContent, sTitle, callBack) {
- var title = sTitle || this.title;
- var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>";
- $(layer).fadeIn(this.speed).appendTo("body");
- this.setting();
- this.move();
- $("#alert-button").focus();
- $("#alert-close").bind("click", this.del); //移除层
- $("#alert-button").bind("click", function () {
- if (callBack) {
- callBack();
- }
- $.kw.del();
- }); //移除层
- this.esc();
- },
- //提示
- confirm : function (sContent, callBack, sTitle) {
- var title = sTitle || this.title;
- var content = sContent || this.content;
- var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>";
- $(layer).fadeIn(this.speed).appendTo("body");
- this.setting();
- $("#alert-button").focus(); //获得焦点
- this.move(); //拖动
- $("#alert-close").bind("click", this.del); //移除层
- $("#alert-cancel").bind("click", this.del); //移除层
- $("#alert-button").bind("click", function () {
- $.kw.del();
- if (callBack) {
- callBack();
- };
- }); //移除层
- this.esc();
- },
- //框拖动功能
- move : function () {
- $("#alert-title").mousedown(function (event) {
- var l = parseInt($("#alert-container").css("left")),
- t = parseInt($("#alert-container").css("top"));
- x = event.pageX - l;
- y = event.pageY - t;
- $("body").bind("mousemove", function (event) {
- $("#alert-container").css({
- "left" : (event.pageX - x)
- });
- $("#alert-container").css({
- "top" : (event.pageY - y)
- });
- //$("#alert-container").fadeTo(0,0.9)
- });
- });
- $("body").mouseup(function () {
- $("body").unbind("mousemove");
- //$("#alert-container").fadeTo(0,1)
- });
- },
- //设置背景层与内位置
- setting : function () {
- var bcw = document.documentElement.clientWidth,
- bch = document.documentElement.clientHeight,
- bsh = document.documentElement.scrollHeight,
- aw = $("#alert-container").width() / 2,
- ah = $("#alert-container").height() / 2;
- $("#alert-layer").css("height", bsh);
- $("#alert-container").css({
- "top" : bch / 2 - ah,
- "left" : bcw / 2 - aw
- });
- }
- //$.kw End
- };
- });
- #alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none}
- #alert-layer{position:absolute;left:0;top:0;width:100%;height:100%;color:#333;line-height:1;z-index:10000; background:rgba(0,0,0,0.1)}
- #alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;}
- #alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;}
- #alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;}
- #alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;}
- #alert-layer #alert-close{background: url(images/close.gif) no-repeat center center; width:25px; height:25px; position:absolute; cursor:pointer; right:2px; top:0px;}
- #alert-layer .alert-button{ padding:5px 10px; text-align:right}
- #alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;}
- .alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px}
- #alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;}
- #alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}
调用方法:
- $.kw.alert("提示内容")
- $.kw.alert("提示内容","系统提示")//修改弹出框提示标题
- $.kw.comport("提示内容");
转载于:https://www.cnblogs.com/ranran/p/3761497.html
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动...相关推荐
- 《预训练周刊》第19期:歧义短语的类量子语境性研究、自然语言处理中prompt方法的系统综述...
No.19 智源社区 预训练组 预 训 练 研究 观点 资源 活动 关于周刊 超大规模预训练模型是当前人工智能领域研究的热点,为了帮助研究与工程人员了解这一领域的进展和资讯,智源社区整理了第19期&l ...
- jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
- jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- element弹框的的this.$alert、this.$prompt方法用法
element弹框的的this.alert.this.alert.this.alert.this.prompt方法用法
- 通示jQuery实例方法,未DOM对象添加多个方法
<script type="text/javascript">/** 通示jQuery实例方法,未DOM对象添加多个方法* 用按钮做多个事件的调用*/(function ...
- linux服务器怎么添加路由,linux系统中添加路由的方法
linux系统中添加路由的方法 发布时间:2020-06-17 11:38:59 来源:亿速云 阅读:95 作者:Leah 这篇文章将为大家详细讲解有关linux系统中添加路由的方法,小编觉得挺实用的 ...
- Win11系统添加信任软件方法分享
Win11系统添加信任软件方法分享,有用户使用的电脑软件被系统提示了有危险存在,导致每次使用的时候都会有安全提示弹出来,那么这个情况怎么去将软件添加到信任区,让它不会出现危险提示呢?来看看以下的操作方 ...
- windows无法打开添加打印机_win7系统提示无法打开添加打印机怎么办 无法打开添加打印机解决方法【介绍】...
最近有位win7系统用户在使用打印机打印的时候,点击添加打印机之后系统却提示:windows无法打开添加打印机,用户不知道怎么什么问题,为此非常苦恼,那么win7系统提示无法打开添加打印机怎么办呢?今 ...
- jQuery添加/插入方法
jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended te ...
最新文章
- elasticsearch外网访问
- new和malloc的区别
- Python : async和await、asyncio与aiofiles
- 【知识图谱】关系抽取
- 未处理的异常: 0xC0000091: Floating-point overflow 的解决办法
- 史上屌炸天超详细的Java实现逆波兰表达式
- 企业微信和钉钉的区别
- element ui图标使用方法
- #运算符 ##预算符
- CAD将文字变成曲线(网页版)
- 正确获取星期几(Calendar.DAY_OF_WEEK)
- Wayland协议解析 一 什么是Wayland
- 2021衡阳田家炳高考成绩查询,快讯!2020年衡阳各学校高考成绩揭晓!
- html表单调用js文件上传,简单实现js上传文件功能
- C#将TimeSpan转换为正常时间
- php通过链接获取公众号文章内容,php公众号链接提取文章标题、封面图、摘要、作者、公众号名称、简介、微信号、正文...
- 电脑插入U盘后识别不出来,怎么办
- CSLA.Net 3.0.5 项目管理示例 UI RolesEdit.aspx
- windows 安装openoffice
- Vue2 操作Element表格单列数据