自定义alert函数,替换alert_dialog小插件
2014-06-17 10:56
281 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>aaa</title> <script src="http://www.dashi.cn//js/jquery1.7.2.js"></script> </head> <body> <style> *{margin:0;padding:0;} .fl{float:left;} /*.yx_alert{position:fixed;left:50%;top:50%;z-index:1001;max-width:500px;margin:0px auto 0;}*/ .yx_alert{z-index:1001;position:fixed;top:0;left:0;width:100%;height:100%;text-align: center;} .clearfix{zoom:1;} .clearfix:after{visibility: hidden;display: block;font-size: 0;content:" ";clear: both;height:0;} .yx_alert .ico{display:inline-block;width:32px;height:32px;background: url(images/promptTip.png) -28px -200px no-repeat;overflow:hidden;margin-top:-3px;} .yx_alert .ico.error{background-position:-28px 0;} .yx_alert .ico.warning{background-position:-28px -120px;} .yx_alert .wrap{display:inline-block;background:#f2f2f2;overflow:hidden;max-width:350px;margin:0 auto;} .yx_alert .contBox{background:#fff;z-index:1;overflow:hidden;position: relative;z-index:1;margin:7px;display:inline-block;} .yx_alert .contBox .cont{margin:0 20px;padding:20px 0;} .yx_alert .content{padding:0 20px 0 50px;word-break:break-all;} </style> <input type="button" value="添加" /> <script> $.extend({ append_yx_alert:function(options){ var defaults={type:'right',content:'操作有误!',txtAlign:'left',txtFontSize:'20px',time:1500}; var opts=$.extend({},defaults,options); var str="<div class='yx_alert' id='yx_alert'>\n\ <div class='wrap clearfix'>\n\ <div class='contBox clearfix'>\n\ <div class='cont'>\n\ <i class='ico fl'></i>\n\ <div class='content'></div>\n\ </div>\n\ </div>\n\ </div>\n\ </div>"; $(function(){ $('#yx_alert').remove(); $(str).appendTo('body'); }); $("#yx_alert").ready(function () { var iDiv_h=$('#yx_alert .wrap').outerHeight(); var iDoc_h=document.documentElement.clientHeight; var h=(iDoc_h-iDiv_h)/2; $('#yx_alert .wrap').css('marginTop',h+'px'); $('#yx_alert').find('.ico').addClass(opts.type).siblings('.content').html(opts.content).css({'textAlign':opts.txtAlign,'fontSize':opts.txtFontSize}); }); setTimeout(function(){ $('#yx_alert').remove(); },opts.time); } }); $(function(){ $.append_yx_alert(); }) </script> <input type="button" id="btn" value="提交" onclick="$.append_yx_alert()" /> </body> </html>
相关文章推荐
- 自定义Cordova插件—SweetAlertDialogPlugin
- 自定义Cordova插件-SweetAlertDialogPlugin
- AlertDialog自定义样式
- 自定义Dialog替换系统Dialog Ok,Cancle 按钮
- Android listView,自定义Adapter,另The constructor AlertDialog.Builder(MyAdapter) is undefined问题
- AlertDialog.Builder弹出自定义Layout窗口
- Android进阶之AlertDialog自定义
- Android AlertDialog 方法setView(view,0,0,0,0)开发自定义对话框
- bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数
- AlertDialog.Builder弹出自定义Layout窗口
- AlertDialog自定义
- bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数
- 自定义alertDialog
- alertDialog的自定义style和使用(Android)
- android AlertDialog去除黑边白边自定义布局
- Android学习小Demo(15)一个自定义AlertDialog的实现
- android获取自定义布局的alertdialog中edittext的值
- 完全自定义Android对话框AlertDialog的实现
- Android开发之AlertDialog 关于重写onCreatDialog自定义对话框的问题 问题出自于《疯狂Android讲义》这本书
- AlertDialog自定义关闭