$.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. Unity Application 前后台切换调用关系

    [Unity Application 前后台切换调用关系] http://blog.csdn.net/aa4790139/article/details/48087877

  2. 微软要支持Objective-C了

    今天的新闻,见http://www.solidot.org/story?sid=43899 更详细的见,http://arstechnica.com/information-technology/20 ...

  3. hdu5442 Favorite Donut

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5442 题目大意:给你一个长度为n的字符串,将它首尾相连成环.问你这个环上找一个长度为n的字典序最大的串 ...

  4. JavaScript Dom基础

    一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...

  5. Nginx Location配置总结

    Nginx Location配置总结 语法规则: location [=|~|~*|^~] /uri/ { - }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即 ...

  6. linux下驱动webcam

    linux自带驱动只支持一些型号的camera,具体型号见http://www.ideasonboard.org/uvc/ 所以有些购买的webcam不能够在linux中被点亮,而且有些厂家只为了在W ...

  7. MVC 微信扫码支付

    微信扫码支付有两种模式, 模式一和模式二, 两者具体的区别可参考官网文档:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_4 微 ...

  8. C/C++入门基础---指针(2)

    5,数组指针的不同含义 int a[5][10]; printf(%d, %d, %d\n", a, a+1, &a+1);  //1310392,1310432,1310592 a ...

  9. win10使用小技巧以及常见问题处理方案

    1.win10开机一直处于黑屏状态或者反复重启怎么处理? 处理小方法:开机按win+X组合件进入高级修复模式---选择修复开启模式---f4进入安全模式开机状态---管理控制面板---禁用或者卸载显卡 ...

  10. 转载:align

    1. 原理    int a;    int size = 8;        <----> 1000(bin)计算a以size为倍数的下界数:    就让这个数(要计算的这个数)表示成二 ...