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合一

时间: 08-05

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

集成代码生成器 SpringMVC mybatis shiro druid bootstrap HTML5 兼容PC 平板 手机 ehcache二级缓存

获取[下载地址]   QQ: 313596790   [免费支持更新]A 代码生成器(开发利器);全部是源码     增删改查的处理类,service层,mybatis的xml,SQL( mysql   和oracle)脚本,   jsp页面 都生成   就不用写搬砖的代码了,生成的放到项目里,可以直接运行B 阿里巴巴数据库连接池druid;  数据库连接池  阿里巴巴的 druid.Druid在监控.可扩展性.稳定性和性能方面都有明显的优势C 安全权限框架shiro ;  Shiro 是一个用

自己编写jQuery插件 之 模拟alert和confirm

啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: fun

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

wordpress如何判断是手机.平板还是PC访问,并针对性的显示特定的内容?Mobile Detect 这个轻量级PHP 类库能够很好的实现这个功能.而且Mobile Detect也有wordpress下的插件可用–WP Mobile Detect,wordpress使用这个插件,很容易实现根据不同终端设备显示特定内容的功能,比如响应式wordpress主题. 安装WP Mobile Detect插件 登录wordpress管理后台,在插件管理页面选择“安装插件”,然后再搜索框里输入关键字“W

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

本文首发于CSDN博客,转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744943 记得我之前参与开发过一个华为的项目,要求程序可以支持好几种终端设备,其中就包括Android手机和Android Pad.然后为了节省人力,公司无节操地让Android手机和Android Pad都由我们团队开发.当时项目组定的方案是,制作两个版本的App,一个手机版,一个Pad版.由于当时手机版的主体功能已经做的差不多了,所以Pad版基本上就

为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小

头部加入 <header> <metaname="viewport"content="width=device-width, initial-scale=1"> </header> 为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小,布布扣,bubuko.com

手机&&PC

说明:今天要说的内容是nginx+keeplived 反向代理层 为什么是nginx+keeplived 反向代理而不用Heartbeat+drbd. keeplived 用多与前端负载,heartbeat+drbd的方式多用于后端的负载 1 用户层: 说一下 用户通过安卓手机 苹果手机 与电脑 访问相同的网站,但是看到的内容不同(专门针对手机,PC设计不同的WEB页面),保障用户访问页面最优 2 反向代理层:后端域名有多个,业务有多个.用户反问到反向代理 只会交给主keeplived,就会造成

手机端touch事件 jquery模拟

ontouchstart实现手机触屏中的hover效果 ontouchstart实现手机触屏中的hover效果 最近一直都在做手机网站的项目,会经常遇到手机屏幕触摸无交互效果,今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下,已经使用效果还不错,大家可以根据下面的案例学下: 一.css样式: <style type="text/css">.inner { width: 100%; height: 100px; position: relative; }.

Fragment实现兼容手机和平板

Android手机的设置界面,点击一下Sound,可以跳转到声音设置界面,如下面两张图所示:             然后再来看一下Android Pad的设置界面,主设置页面和声音设置页面都是在一个界面显示的,如下图所示: 如果这分别是两个不同的App做出的效果,那没有丝毫惊奇之处.但如果是同一个App,在手机上和平板上运行分别有以上两种效果的话,你是不是就已经心动了?我们现在就来模拟实现一下. 新建一个Android项目,取名叫FragmentDemo.打开或新建MainActivity作为

【jQuery】论手机浏览器中拖拽动作的艰难性

本来标题是<论手机浏览器中拖拽动作的不可能性>的,但是想了想还是改成艰难性,避免过于绝对 本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的,但是最后发现竹篮打水一场空, 虽然拖拽动作在手机浏览器中司空见惯,但是在手机浏览器中,要想实现可以被拖拽的组件,却是一件不可能的事情. 先来看看在PC网页中,拖拽动作是怎么做的, 首先,我们有一个按钮,点击有动作,一直按着不放,可以随意拖动,就像iphone可以随意拖动的控制按钮一样, 如上图的灰色图层,写出来也不甚容易, 首先,要把灰色图层

手机、平板、可穿戴的新风向:ROHM高精度光学脉搏传感器

进入2017年,就在业界为即将到来的物联网产业大机遇而倍感兴奋的时候,Gartner的一份最新调查却迎头泼了一盆凉水:消费者最初被可穿戴设备的新奇功能和华丽外表所吸引而购买,但是有近三分之一的用户在使用一段时间后感到无聊然后抛弃了它们,智能手表弃用率为29%.健身类可穿戴设备弃用率为30%. 除了可穿戴设备外,智能手机与平板电脑也进入了创新乏善可陈的境地.根据Gartner,2016年全年智能手机销售量15亿部.较2015年增加5%,其中虽然苹果在两年后重夺全球智能手机龙头厂商,但在2016年第