<!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>
自定义alert函数,替换alert_dialog小插件
最新推荐文章于 2018-01-26 10:17:42 发布