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

js原生alert弹框美化相关推荐

js的alert弹框中怎么写html,JavaScript基础教程之alert弹出提示框实例
alert 命令弹出一个提示框为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: alert(&qu ...
Js简朴原生实现弹框
Js简朴原生实现弹框 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
GIF.gif 前言最近在做移动端的项目,需要制作移动端的alert弹框和message-box提示信息:之前使用Vue框架的element-ui时,就记得element-ui的弹框,今天深入的研究 ...
js中唤醒弹框的3种方式
js中唤醒弹框的3种方式 1.alert() 警告框,只有确定按钮,常用于确保用户可以得到某些信息.需点击确定按钮才能继续操作. alert("ss") 2.confirm() 确 ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
php中如何写js代码提示_PHP 如何编写类似js中alert() 提示框
这篇文章主要介绍了PHP 实现类似js中alert() 提示框功能,非常的实用,这里推荐给大家,有需要的小伙伴来参考下,希望大家能喜欢. 主要应用于添加判断提示,跳转,返回,刷新. 代码如下:/** ...
python编写姓名年龄_python小工具 - alert弹框输出姓名年龄、求和
# 导入tkinter的所有的包里面所有的内容from tkinter import *import tkinter.messageboxasmessagebox # 从Frame派生一个Applic ...
alert弹框DeprecationWarning
公司最近在搞自动化,本人参与其中遇到的问题和解决的问题当做积累经验分享给大家 selenium做UI自动化的时候经常会对alert弹框做一些确认和取消以及获取text文本.由于本人用的python编辑 ...
alert弹框去掉里面的网址
alert弹框去掉里面的网址 window.alert = function(name){var iframe = document.createElement("IFRAME") ...

js原生alert弹框美化

js原生alert弹框美化相关推荐

最新文章

热门文章