简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 春 节 27
2021年 情人节 29
2021年 元宵节 41
2022年 元 旦 350
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现alert弹框效果

    内容摘要: 以下是alert.js代码 var myAlert = {alertbox : function(alertContent){var windowWidth = window.innerWidth;windowHeight = window.innerHeight;alertContainer = document.createElement('div');......

      以下是alert.js代码

    var myAlert = {

    alertbox : function(alertContent){

    var windowWidth = window.innerWidth;

    windowHeight = window.innerHeight;

    alertContainer = document.createElement("div");

    alertContainer.id = "myAlertBox";

    alertContainer.style.cssText="position:absolute;left:0px;top:0px;width:100%;z-index:9999;";

    alertContainer.style.height = windowHeight+"px";

    alertOpacity = document.createElement("div");

    alertOpacity.style.cssText="position:absolute;left:0px;top:0px;width:100%;background:#000;opacity:0.5;z-index:9999;";

    alertOpacity.style.height = windowHeight+"px";

    alertContainer.appendChild(alertOpacity)

    alertMainBox = document.createElement("div");

    alertMainBox.style.cssText="position:absolute;width:200px;height:200px;line-height:200px;text-align:center;background:green;z-index:10000;"

    alertMainBoxLeft = (windowWidth-200)/2;

    alertMainBoxTop = (windowHeight-200)/2;

    alertMainBox.style.left = alertMainBoxLeft+"px";

    alertMainBox.style.top = alertMainBoxTop+"px";

    alertMainBox.innerHTML = alertContent;

    alertContainer.appendChild(alertMainBox);

    alertClose = document.createElement("div");

    alertClose.id = "closeBox";

    alertClose.style.cssText = "position:absolute;right:0px;top:0px;width:30px;height:30px;background:red;cursor:pointer";

    alertMainBox.appendChild(alertClose);

    document.body.appendChild(alertContainer);

    closeButton = document.getElementById("closeBox");

    console.log(closeButton)

    closeButton.onclick = function(){

    document.body.removeChild(document.getElementById("myAlertBox"));

    }

    }

    }

    以下是具体要用时的代码

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Study</title>

    </head>

    <script type="text/javascript" charset="utf-8" src="alert.js"></script>

    <body>

    <script type="text/javascript" charset="utf-8">

    myAlert.alertbox("这是自定义alert框");

    </script>

    </body>

    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/11/19 发布时间:16:41:28 点击:374 录入:齐天大圣
  • 上一篇:javascript显示年月日时间代码
  • 下一篇:js 取时间差去掉周六周日实现代码
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.88 Build 20.12.22(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021