js 改变 win alert 样式

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

zxqlib

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

阅读量536

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38041239/article/details/89708590

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

js 改变 win alert 样式实现弹框提示效果

<!DOCTYPE html>

<html>
<style>
  #alertdiv {
    position: absolute;
    padding: 0 20px 0 60px;
    top: 30%;
    right: 5%;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    box-shadow: 0px 3px 20px 0px rgba(26, 41, 55, 0.1);
    border-radius: 3px;
  }

  #alert-title {
    font-size: 16px;
    color: #303133;
    float: left;
    font-weight: bold;
  }

  #cancel {
    width: 12px;
    float: fight;
    position: absolute;
    top: 15px;
    right: 20px;
  }

  #right {
    width: 20px;
    float: left;
    margin-left: -30px;
    margin-top: 3px;
  }
</style>
<head>

  <meta charset="UTF-8">

  <title>HTML5学堂 - alert</title>

</head>

  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">
    (function () {
      window.alert = function (text) {
        //解析alert内容中的换行符
        text = text.toString().replace(/\\/g, '\\').replace(/\n/g, '<br />').replace(/\r/g, '<br />');

        // 自定义DIV弹窗
        var alertdiv =
          '<div id="alertdiv">'
            +'<img id="cancel" src="./img/cancel.png" onclick="$(this).parent().remove(); "/><br />'
            +'<img id="right" src="./img/right.png" /><div id="alert-title">注册成功</div><br />'
            +'<div id="note">您的注册申请提交成功，请耐心等待工作人员联系您</div>'
            +'<br/></div></div>'
        $(document.body).append(alertdiv);
        // 显示
        $("#alertdiv").show();
      };
    })();
  </script>
<body>
  <input type="submit" name="button" id="button" value="点击" onclick='alert("")' />
</body>

</html>

zxqlib

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 改变 win alert 样式

js 改变 win alert 样式实现弹框提示效果<!DOCTYPE html><html><style> #alertdiv { position: absolute; padding: 0 20px 0 60px; top: 30%; right: 5%; text-align: center; ...
复制链接

扫一扫