HTML 自定义弹窗自动消失

1 篇文章 0 订阅
1 篇文章 0 订阅

html中有一些弹出窗,如alert,confirm等。但是有些我们特定的需求不好实现,比如弹出窗弹出后3s后消失,所以要用到自己定义的弹出窗。如下:参考借鉴:https://zhidao.baidu.com/question/589365277.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <!-- 点击按钮,传递显示数据 -->
	<button id="btn" onclick="func('数据更新成功')">btn</button>
    <!-- 显示的时间弹窗的div -->
	<div id="date"></div>
</body>
<script>
    // 创建一个div
    var layer=document.createElement("div");
    // 设置div的id值
    layer.id="layer";
    // 上面按钮点击事件
    function func(date){
        /* 创建div的样式,宽200px,高80px,下面的是css样式居中,
         * css样式居中具体了解链接:https://blog.csdn.net/A_Bear/article/details/80546181
         */
        var style={
            background:"#f00",
            position:"absolute",
            zIndex:10,
            width:"200px",
            height:"80px",
            left:"50%",
            top:"50%",
            marginLeft:"-100px",
            marginTop:"-40px"
        }
        for(var i in style)
            layer.style[i]=style[i];   
   
        // 当找不到id为layer的控件时
        if(document.getElementById("layer")==null){
            // 在body中添加layer控件(layer在上面创建的)
            document.body.appendChild(layer);
            // 设置显示类容
            layer.innerHTML=date;
            // 将div中文本居中
            layer.style.textAlign="center";
            layer.style.lineHeight="80px"; // 作用是调节字体行高与div同高,使其保持水平居中
            // 设置3s后去掉弹出窗
            setTimeout("document.body.removeChild(layer)",3000)
        }
    }

    // 下面是计时控件js
    change();  
    function change(){  
        var today;  
        today = new Date();  
        timeString = today.toLocaleString();  
        document.getElementById("date").innerHTML = timeString;  
        setTimeout("change();", 100);  
    }
</script>
</html>

 

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
HTML 中可以使用 JavaScript 来自定义弹窗。下面是一个简单的示例: 1. 首先,在 HTML 文件中添加一个按钮: ```html <button onclick="openModal()">打开弹窗</button> ``` 2. 接着,添加弹窗HTML 代码: ```html <div id="myModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeModal()">×</span> <p>这是一个自定义弹窗。</p> </div> </div> ``` 3. 在 CSS 文件中,为模态框和关闭按钮添加样式: ```css /* 模态框 */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } /* 模态框中的内容 */ .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } /* 关闭按钮 */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } ``` 4. 最后,在 JavaScript 文件中编写打开和关闭弹窗的函数: ```javascript // 打开弹窗 function openModal() { var modal = document.getElementById("myModal"); modal.style.display = "block"; } // 关闭弹窗 function closeModal() { var modal = document.getElementById("myModal"); modal.style.display = "none"; } ``` 这样就完成了一个简单的自定义弹窗。当用户点击按钮时,会打开模态框,模态框中包含一个关闭按钮和一些内容。用户点击关闭按钮或者模态框外部的区域时,模态框会关闭。可以根据实际需求进行更改和扩展。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值