javascript修改网页的默认alert弹窗

最新推荐文章于 2024-05-17 05:47:44 发布

ITPlus

最新推荐文章于 2024-05-17 05:47:44 发布

阅读量6.2k

点赞数 5

分类专栏： js 文章标签： javascript html web前端

本文链接：https://blog.csdn.net/Jiang_Rong_Tao/article/details/78115861

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

看着浏览器默认的alert有点不尽人意，而且不同的浏览器风格也不同，所以就想着整一个统一的，初写web前端，js不是用的很溜，自娱自乐。

效果预览

确认类型的对话框

错误型

html代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>修改网页的默认alert弹窗</title>
    <script type="text/javascript" src="js/CommonDialog.js">
    </script>
</head>
<body>
<button onclick="showConfirmDialog('我的对话框','退出登录')">确认对话框</button><br>
<button onclick="showOKDialog('提交成功','img/ok.svg')">提交成功的对话框</button><br>
<button onclick="showWaringDialog('请求超时','img/warning.svg')">警告的对话框</button><br>
</body>
</html>

js文件如下：

/**
 * 自定义网页交互对话框
 * Created by jiangrongtao on 2017-9-27.
 */

function setAleartStyle() {
    var shield = document.createElement("DIV");
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "50%";
    shield.style.top = "50%";
    shield.style.width = "280px";
    shield.style.height = "150px";
    shield.style.marginLeft = "-140px";
    shield.style.marginTop = "-110px";
    shield.style.zIndex = "25";
    var alertFram = document.createElement("DIV");
    alertFram.id = "alertFram";
    alertFram.style.position = "absolute";
    alertFram.style.width = "280px";
    alertFram.style.height = "150px";
    alertFram.style.left = "50%";
    alertFram.style.top = "50%";
    alertFram.style.marginLeft = "-140px";
    alertFram.style.marginTop = "-110px";
    alertFram.style.textAlign = "left";
    alertFram.style.lineHeight = "150px";
    alertFram.style.zIndex = "300";
    alertFram.style.borderRadius = "4px";
    return {shield: shield, alertFram: alertFram};
}
/**
 * @param infomation 提示信息
 * @param imgUrl 提示图标路径
 */
function commonDialog(infomation,imgUrl) {
    var __ret = setAleartStyle();
    var shield = __ret.shield;
    var alertFram = __ret.alertFram;
    strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%; \">\n";
    strHtml += " <li style=\"background:#345;text-align:center;font-size:20px;height:95px;line-height:95px;border:1px solid #F9CADE;border-radius :6px 6px 6px 6px;color:#ffffff\"><img src='"+imgUrl+"' align='center' style=\"width:60px; height:60px;margin-right: 16px;\">"+infomation+"</li>\n";
    strHtml += "</ul>\n";
    alertFram.innerHTML = strHtml;
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    document.body.onselectstart = function(){return false;};
    alertFram.focus();
    setInterval(function () {
        alertFram.style.display = "none";
        shield.style.display = "none";
    },3000);
}
/**
 * 确认对话框
 * @param title
 * @param infomation
 */
function showConfirmDialog(title,infomation)
{
    var __ret = setAleartStyle();
    var shield = __ret.shield;
    var alertFram = __ret.alertFram;
    strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
    strHtml += " <li style=\"background:#334455;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:30px;line-height:30px;border:1px solid #F9CADE;border-radius :6px 6px 0px 0px;color:white\">"+title+"</li>\n";
    strHtml += " <li style=\"background:#334455;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#ffffff\">"+infomation+"</li>\n";
    strHtml += " <li style=\"background:#334455;text-align:center;font-weight:bold;height:30px;padding:5px;line-height:25px;border-radius :0px 0px 6px 6px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;background:#334455;color:white;border:1px solid white;border-radius:4px;cursor:pointer;cufont-size:14px;line-height:25px;outline:none;margin-top: 2px\"/></li>\n";
    strHtml += "</ul>\n";
    alertFram.innerHTML = strHtml;
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    this.doOk = function(){
        alertFram.style.display = "none";
        shield.style.display = "none";
    }
    alertFram.focus();
    document.body.onselectstart = function(){return false;};

}

/**
 * 提交或者请求成功
 * @param infomation 提示信息
 * @param imgUrl 提示图标路径
 */
function showOKDialog(infomation,imgUrl)
{
    commonDialog(infomation,imgUrl);
}

/**
 * 提交或者请求成功
 * @param infomation 提示信息
 * @param imgUrl 提示图标路径
 */
function showWaringDialog(infomation,imgUrl)
{
    commonDialog(infomation,imgUrl);
}

注意：commonDialog（）方法中可以直接传入你要用的图片url即可
直接拿去用，不谢！

ITPlus

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
javascript修改网页的默认alert弹窗

看着浏览器默认的alert有点不尽人意，而且不同的浏览器风格也不同，所以就想着整一个统一的，初写web前端，js不是用的很溜，自娱自乐。效果预览 html代码如下：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>修改网页的默认alert弹窗</title> <script
复制链接

扫一扫