jquery 模拟 alert 手机,pc,平板 3合一
$.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合一的更多相关文章
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
- [转]jQuery插件实现模拟alert和confirm
本文转自:http://www.jb51.net/article/54577.htm (function () { $.MsgBox = { Alert: function (title, msg) ...
- 自编jQuery插件实现模拟alert和confirm
现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了自己定制一个的想法...... 啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的al ...
- wordpress如何判断手机、平板还是PC并显示对应的内容-Mobile Detect
wordpress如何判断是手机.平板还是PC访问,并针对性的显示特定的内容?Mobile Detect 这个轻量级PHP 类库能够很好的实现这个功能.而且Mobile Detect也有wordpre ...
- Jquery判断当前时PC端,移动端,平板端屏幕
$(function(){ // console.log(navigator.userAgent); var os = function (){ var ua = navi ...
- FineUI(专业版)v3.0.0 发布,手机、平板和桌面全支持!
FineUI(专业版)v3.0.0 已经正式发布,全面支持手机.平板和桌面! 自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 多位注册用户,130 ...
- 模拟alert和confirm
啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $ ...
- Android手机平板两不误,使用Fragment实现兼容手机和平板的程序
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744943 记得我之前参与开发过一个华为的项目,要求程序可以支持好几种终端设备,其 ...
- 【Android 界面效果17】Android手机平板两不误,使用Fragment实现兼容手机和平板的程序
记得我之前参与开发过一个华为的项目,要求程序可以支持好几种终端设备,其中就包括Android手机和Android Pad.然后为了节省人力,公司无节操地让Android手机和Android Pad都由 ...
随机推荐
- Angularjs学习笔记(二)----模块
一.定义 如何将全局定义的控制器模块化 先看下全局定义的控制器 var HelloCtrl=function($scope){ $scope.name='World'; } 模块化后代码 angula ...
- funny_python 01 import antigravity
在Python里面import antigravity 会发现另一个小彩蛋 Tada~ 其实就是打开了xkcd的一个python主题漫画 鼠标停留在图片上,还会看到标题: "I wrote ...
- 浅谈Java 8的函数式编程
函数式编程语言是什么? 函数式编程语言的核心是它以处理数据的方式处理代码.这意味着函数应该是第一等级(First-class)的值,并且能够被赋值给变量,传递给函数等等.(转载自http://xz.p ...
- linux内核升级图文攻略(转)
一.Linux内核概览Linux是一个一体化内核(monolithic kernel)系统.设备驱动程序可以完全访问硬件.Linux内的设备驱动程序可以方便地以模块化(modularize)的形式设置 ...
- python 协程
协程 协程就是一种用户态内的上下文切换技术. 1.使用gevent实现协程, gevent.spawn()调用函数, gevent.sleep(1) 模拟阻塞,实现切换. import gevent ...
- SpringMVC结合easyUI中datagird实现分页
SpringMVC结合easyUI中datagird实现分页 DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.轻量级,单元格合并.多列标题.冻结列和页脚只是其中 ...
- JDBC 工具类
在Java编程过程中 我们需要连接数据库 所以数据库的连接和增删改查操作是非常基本的操作同时又非常的重要.同时在JDBC编程中 ,有很多的方法如更新个查找操作,我们可以对其进行封装,提高我们编码的效率 ...
- Hibernate自动建表问题
自动见表配置 <property key="hibernate.hbm2ddl.auto">update</property> 运行时出现了一下错误 org ...
- Gevent协程
协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来 ...
- TCP协议学习记录 (三) Ping程序 RR选项 记录路由hop
一开始想直接在上个程序改,自己构造IP包头,但后来发现不行,微软不让干了,所以后来选用libcap库来收发包 代码写的很乱.. #pragma pack(4) #define ECHO_REQUEST ...