$.kw = {

title : "System information", //默认标题 可修改

speed : 400, //默认速度 可修改

buttonName : "确定", //确定按钮默认名称 可修改

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();

$("#alert-button").focus();

$("#alert-close").bind("click", this.del); //移除层

$("#alert-button").bind("click", function () {

if (callBack) {

callBack();

}

$.kw.del();

}); //移除层

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 = $(window).width(),

bch = $(window).height(),

bsh = $(document).height(),

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

};

$(window).resize(function() {

if($("#alert-layer")){

$("#alert-layer").css("height", 0);

var strheight= $(document).height();

$("#alert-layer").css("height", strheight);

var aw = $("#alert-container").width() / 2,

ah = $("#alert-container").height() / 2;

$("#alert-container").css({

"top" : $(window).height() / 2 - ah,

"left" : $(window).width() / 2 - aw

});

}

});

/*模拟alert样式*/

#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.2)

}

#alert-layer #alert-container {

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

padding: 10px;

width: 30%;

position: fixed;

_position: absolute;

}

#alert-layer .alert-top {

background: #F1F1F1;

height: 10px;

border-radius: 3px 3px 0 0;

-moz-border-radius: 3px 3px 0 0;

-webkit-border-radius: 3px 3px 0 0;

}

#alert-layer .alert-bottom {

background: #F1F1F1;

height: 10px;

border-radius: 0 0 3px 3px;

-moz-border-radius: 0 0 3px 3px;

-webkit-border-radius: 0 0 3px 3px;

}

#alert-layer #alert-title {

font-size: .875em;

height: 30px;

line-height: 25px;

padding: 0 10px;

position: relative;

font-weight: bold;

background: #F1F1F1;

border-bottom: 1px solid #B9B9B9;

}

#alert-layer #alert-close {

background: url(/Images/icon_close.png) 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;

border-top: 1px solid #B9B9B9;

background: #F1F1F1;

}

#alert-layer #alert-content {

padding: 10px 15px;

font-size:.725em;

}

.alert-box {

background: #fff;

}

#alert-layer button {

padding: 5px;

border: 1px solid #CCC;

margin: auto 5px;

border-radius: 2px;

min-width: 60px;

font-size:.725em;

}

#alert-layer h1, #alert-layer h2, #alert-layer h3, #alert-layer h4 {

margin: 10px auto;

font-size: 1em

}

根据 http://kingwell-leng.iteye.com/blog/1592881 稍微加工一下。主要功劳还是原作者。 贴上代码.

这个段代码 再手机,pc测试均无问题 可直接复制使用。当时在做响应式网站时用到的。pc站的alert 太难看了。所以用jquery模拟一个。

jquery 模拟 alert 手机,pc,平板 3合一的更多相关文章

  1. 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动

    我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...

  2. [转]jQuery插件实现模拟alert和confirm

    本文转自:http://www.jb51.net/article/54577.htm (function () { $.MsgBox = { Alert: function (title, msg) ...

  3. 自编jQuery插件实现模拟alert和confirm

    现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了自己定制一个的想法...... 啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的al ...

  4. wordpress如何判断手机、平板还是PC并显示对应的内容-Mobile Detect

    wordpress如何判断是手机.平板还是PC访问,并针对性的显示特定的内容?Mobile Detect 这个轻量级PHP 类库能够很好的实现这个功能.而且Mobile Detect也有wordpre ...

  5. Jquery判断当前时PC端,移动端,平板端屏幕

    $(function(){     // console.log(navigator.userAgent);     var os = function (){       var ua = navi ...

  6. FineUI(专业版)v3.0.0 发布,手机、平板和桌面全支持!

    FineUI(专业版)v3.0.0 已经正式发布,全面支持手机.平板和桌面!       自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 多位注册用户,130 ...

  7. 模拟alert和confirm

    啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $ ...

  8. Android手机平板两不误,使用Fragment实现兼容手机和平板的程序

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744943 记得我之前参与开发过一个华为的项目,要求程序可以支持好几种终端设备,其 ...

  9. 【Android 界面效果17】Android手机平板两不误,使用Fragment实现兼容手机和平板的程序

    记得我之前参与开发过一个华为的项目,要求程序可以支持好几种终端设备,其中就包括Android手机和Android Pad.然后为了节省人力,公司无节操地让Android手机和Android Pad都由 ...

随机推荐

  1. find命令:忽略一个目录或者多个目录

    example: find ./ ! -path "./output/*" ! -path "./output1/*" -type f | xargs grep ...

  2. OpenLDAP双主

    1:主A服务器           然后重新生成配置文件数据       主B服务器             注意:两个主服务器的rid必须得一样   在做主从的时候,必须得安装必要的软件包,comp ...

  3. orcl 中decode的妙用

    在不认识这个函数之前,我们要对同一张表或者同一查询语句块中的某一个字段进行计算分类统计时,要用到很多函数以及外连接.用这一函数往往可以解决很多复杂的东西. 网上的一段具有代表性的decode用法,不用 ...

  4. Python SQLAlchemy --2

    本文為 Python SQLAlchemy ORM 一系列教學文: 接下來會更深入地探討查詢的使用. 查詢的基本使用法為 session.query(Mapped Class),其後可加 .group ...

  5. Highchart URL

    http://www.highcharts.com/stock/demo/flags-general http://www.codesec.net/view/217265.html http://js ...

  6. JavaWeb 学习007-4个页面,5条sql语句(添加、查看、修改、删除)2016-12-2

    需要复习的知识: 关联查询 =================================================================================班级模块学 ...

  7. [刘阳Java]_避开环境配置快速的使用Java的开发工具_第5讲

    我们一般学习Java都应该遵循通过系统的命令工具来编译Java程序,然后对编译好Java程序进行运行,这个是非常好的习惯.但是随着后期学习Java技术的深入我们也得像Java的IDE工具屈服.所以,可 ...

  8. python:爬虫

    模块: (1)url管理器:对url进行管理 (2)网页下载器(urllib2):将需要爬取的url指定的网页以字符串的形式下载下来 (3)网页解释器(BeautifulSoup):解析 利用urll ...

  9. Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} failed due to the following error: 80070005.

    Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} fai ...

  10. MVC5+EF6 简易版CMS(非接口) 第四章:使用业务层方法,以及关联表解决方案

    目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...