jquery 模拟 alert 手机，pc，平板 3合一

浏览数：56 / 时间：2015年06月11日

$.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模拟一个。