js原生alert弹框美化

来源：互联网发布：办卡软件编辑：程序博客网时间：2024/05/16 13:42

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);    }}//重定义alertwindow.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）弹框样式可根据实际情况自行定义

阅读全文

0 0