js原生alert弹框美化

最新推荐文章于 2024-06-10 16:45:00 发布

kirsten_z

最新推荐文章于 2024-06-10 16:45:00 发布

阅读量1.5w

点赞数 2

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/kirsten_z/article/details/76242286

版权

jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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 />
    性&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="1" />&nbsp;
            <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）弹框样式可根据实际情况自行定义

kirsten_z

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js原生alert弹框美化

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/x
复制链接

扫一扫

专栏目录