1、说明
通过自定义方式美化弹框,使用alert弹框错误提示
2、示例
html代码片段:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="/assets/js/jquery.js"></script>
<script type="text/javascript" src="/assets/js/front.js?v=1"></script>
<style type="text/css">
/*弹窗*/
div{padding: 0; margin: 0;}
.cover{background: rgba(0,0,0,0.64);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 101;}
.pop_box{width: 74%;margin: 0 auto;position: fixed;top: 30%;left: 50%;margin-left: -37%;z-index: 102;}
.pop_img img{width: 100%;}
.pop_center{background: url(/assets/images/img/pop_center.png) no-repeat;min-height: 44px; margin-left: -9px;}
.pop_center span{text-align: center;font-size: 18px;color: #fff;line-height: 30px; margin-left: 28%;}
</style>
</head>
<body>
用户名:<input type="text" name="username" id="username" />
<br /><br />
性 别:<input type="radio" name="sex" value="1" />
<input type="radio" name="sex" value="2"/>
<br /><br />
<input type="button" value="submit" onclick="check();" />
</body>
</html>
front.js
//弹出自定义提示窗口
var showAlert= function(msg, url){
//弹框存在
if ( $("#alert_box").length > 0) {
$('#pop_box_msg').html(msg);
} else {
var alertHtml = '<div id="alert_box">'
+ '<div class="cover" id="cover_alert" onclick="closeAlert()"></div>'
+ '<div class="pop_box" id="pop_box_alert" onclick="closeAlert()">'
+ '<div class="pop_img">'
+ '<img src="/assets/images/img/pop_top.png">'
+ '</div>'
+ '<div class="pop_center">'
+ '<span id="pop_box_msg">' + msg + '</span>'
+ '</div>'
+ '<div class="pop_img">'
+ '<img src="/assets/images/img/pop_bottom.png">'
+ '</div>'
+ '</div>'
+ '</div>';
$("body").append(alertHtml);
}
$("#alert_box").show();
if(url){
setTimeout(function(){
window.location.href = url + '?id=' + 10000*Math.random();
} , 2000 );
}else{
setTimeout("$('#alert_box').hide();" , 2000);
}
}
//重定义alert
window.alert=showAlert;
//点击遮罩关闭
function closeAlert(){
$("#alert_box").hide();
}
//验证表单
function check()
{
var username = $.trim($("#username").val());
if (username.length < 1) {
alert('用户名不能为空!');
return false;
}
var sex = $('input[name="sex"]:checked').val();
if (sex.length < 1) {
alert('性别不能为空!');
return false;
}
alert('提交成功!');
return true;
}
3、效果
注:
1)本示例使用laravel框架,php语法
2)弹框样式可根据实际情况自行定义