纯js通用提示弹出框

最新推荐文章于 2024-05-10 09:56:17 发布

tribalElders

最新推荐文章于 2024-05-10 09:56:17 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/tribalElders/article/details/79359332

版权

web-前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建通用的js弹出框

-话不多说直接上代码，以便以后回顾，jquery等的也是一个道理

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<ul style="list-style: none;width: 350px;">-->
<!--<li style="text-align: center;line-height: 40px;font-size: 16px;background-color: gainsboro;">提&nbsp;&nbsp;示</li>-->
<!--<li style="text-align: center;line-height: 60px;font-size: 18px;border: 1px solid gainsboro;background-color: #fff">账号或密码不能为空！</li>-->
<!--<li style="text-align: center;line-height: 50px;font-size: 15px;background-color: #cccccc"><input value="确&nbsp;&nbsp;定" style="cursor:pointer;height: 40px;width:100px;font-size: 18px;text-align: center;"type="button" onclick="okDo()"></li>-->
<!--</ul>-->
<input type="button" value="弹出" onclick="alertMsg('错误提示','密码不能为空！')">
</body>
</html>
<script type="text/javascript">

    function alertMsg(title,msg) {
        //遮罩层
        var cirnterm = document.createElement("DIV");
        cirnterm.style.position = "absolute";
        cirnterm.style.width = "100%";
        cirnterm.style.height = "100%";
        cirnterm.style.zIndex = "50";
        cirnterm.style.top = "0";
        cirnterm.style.left = "0";
        cirnterm.style.backgroundColor = "gray";
        cirnterm.style.opacity = "0.3";
        //显示信息层
        var alertBox = document.createElement("DIV");
        alertBox.style.position = "absolute";
        alertBox.style.top = "50%";
        alertBox.style.left = "50%";
        alertBox.style.zIndex = "300";
        alertBox.style.marginTop = "-140px";
        alertBox.style.marginLeft = "-120px";
        //内容块
        var alerHtml = "<ul style=\"list-style: none;border:1px solid #999999;margin:0px;padding:0px;width: 350px;\">";
        alerHtml += "<li style=\"text-align: center;line-height: 40px;font-size: 16px;background-color: gainsboro;\">"+title+"</li>";
        alerHtml += "<li style=\"text-align: center;line-height: 60px;font-size: 18px;border: 1px solid gainsboro;background-color: #fff\">"+msg+"</li>";
        alerHtml += "<li style=\"text-align: center;line-height: 50px;font-size: 15px;background-color: #cccccc\"><input value=\"确&nbsp;&nbsp;定\" style=\"cursor:pointer;height: 40px;width:100px;font-size: 18px;text-align: center;\"type=\"button\"onclick=\"okDo()\"></li>";
        alerHtml += "</ul>";
        alertBox.innerHTML = alerHtml;
        document.body.appendChild(alertBox);
        document.body.appendChild(cirnterm);
        this.okDo = function () {
            cirnterm.style.display = "none";
            alertBox.style.display = "none";
        }
    }
</script>

tribalElders

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯js通用提示弹出框

创建通用的js弹出框-话不多说直接上代码，以便以后回顾，jquery等的也是一个道理代码块&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt
复制链接

扫一扫

专栏目录