关于使用JS装饰alert弹出窗口

最新推荐文章于 2024-04-03 03:16:00 发布

我有点疼但我还能忍

最新推荐文章于 2024-04-03 03:16:00 发布

阅读量393

点赞数 1

文章标签： js alert弹窗

本文链接：https://blog.csdn.net/qq_41582441/article/details/81038945

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script>
        window.alert = function(str)
        {
            var shield = document.createElement("DIV");
            shield.id = "shield";
            shield.style.position = "absolute";
            shield.style.left = "0px";
            shield.style.top = "0px";
            shield.style.width = "100%";
            shield.style.height = document.body.scrollHeight+"px";
            //弹出对话框时的背景颜色
            shield.style.background = "#fcfcff";
            shield.style.textAlign = "center";
            shield.style.zIndex = "25";
            //背景透明 IE有效
            //shield.style.filter = "alpha(opacity=0)";
            var alertFram = document.createElement("DIV");
            alertFram.id="alertFram";
            alertFram.style.position = "absolute";
            alertFram.style.left = "50%";
            alertFram.style.top = "50%";
            alertFram.style.marginLeft = "-225px";
            alertFram.style.marginTop = "-75px";
            alertFram.style.width = "450px";
            alertFram.style.height = "150px";
            alertFram.style.background = "#ff0000";
            alertFram.style.textAlign = "center";
            alertFram.style.lineHeight = "150px";
            alertFram.style.zIndex = "300";
            strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
            strHtml += " <li style=\"background:#828add;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #cebdf9;\">[提示一波你]</li>\n";
            strHtml += " <li style=\"background:#e4d8ff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #d2c4f9;border-right:1px solid #dcbef9;\">"+str+"</li>\n";
            strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #cea8f9;\"><input type=\"button\" value=\"确 定\" οnclick=\"doOk()\" /></li>\n";
            strHtml += "</ul>\n";
            alertFram.innerHTML = strHtml;
            document.body.appendChild(alertFram);
            document.body.appendChild(shield);
            var ad = setInterval("doAlpha()",5);
            this.doOk = function(){
                alertFram.style.display = "none";
                shield.style.display = "none";
            }
            alertFram.focus();
            document.body.onselectstart = function(){return false;};
        }//测试
        function show(txt) {
            alert(txt);
        }
    </script>
</head>
<body>
<input type="button" value="点击开始" οnclick="show('关于这个弹窗')">
</body>
</html>

初学者在学习Javascript时使用JS装饰alert

而我更推荐使用Jquery装饰

但是能力有限还没有深入学习Jquery

点击按钮即可直接展示效果

弹窗样式

我有点疼但我还能忍

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于使用JS装饰alert弹出窗口

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试&lt;/title&gt; &lt;script&gt; window.alert = function(str)
复制链接

扫一扫