[转]html实现弹窗的实例

西红柿炒番茄31

11919人浏览 · 2022-07-26 21:58:06

西红柿炒番茄31 · 2022-07-26 21:58:06 发布

上午闲来无事，用html及原生js写个弹窗，供参考。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			.zhezhao{
				position: fixed;
				left: 0px;
				top: 0px;
				background: #000;
				width: 100%;
				height: 100%;
				opacity: 0.5;
			}
			.tankuang{
				position: relative;
				background: #fff;
				width: 50%;
				height: 80%;
				border-radius: 5px;
				margin: 5% auto;
			}
			#header{
				height: 40px;
			}
			#header-right{
				position: absolute;
				width: 25px;
				height: 25px;
				border-radius: 5px;
				background: red;
				color: #fff;
				right: 5px;
				top: 5px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="dianwo()">点我</button>
		<div class="zhezhao" id='zhezhao'>
			<div class="tankuang">
				<div id="header">
					<span>我是弹窗</span>
					<div id="header-right" onclick="hidder()">x</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(){
				document.getElementById('zhezhao').style.display="";
			}
			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}
		</script>
	</body>
</html>

在这里插入图片描述

<style>
	.zhezhao{
		position: fixed;
		left: 0px;
		top: 0px;
		/*background: #000;*/
		width: 100%;
		height: 100%;
		opacity: 0.7;
	}
	.tankuang{
		position: relative;
		background: #000;
		width: 150px;
		height: 50px;
		border-radius: 5px;
		top: 50%;
	}
	#header{
		height: 40px;
		display: flex;
	}
	#header-right{
		position: absolute;
		width: 25px;
		height: 25px;
		border-radius: 5px;
		background: red;
		color: #fff;
		right: 5px;
		top: 5px;
		text-align: center;
	}
</style>

<center>
	<div class="zhezhao" id='zhezhao'>
		<div class="tankuang">
			<div id="header">
				<span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">复制成功</span>
			</div>
		</div>
	</div>
</center>

<scrtip>
	document.getElementById('zhezhao').style.display="none";
	function dianwo(str){
		document.getElementById('layer_msg').innerHTML = str;
		document.getElementById('zhezhao').style.display="";
		setTimeout(function(){
			document.getElementById('zhezhao').style.display="none";
		},5000);
	}
</scrtip>

在这里插入图片描述

<style>
    .toast {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 15px 25px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        z-index: 9999;
        animation: toastSlide 0.3s ease-out;
    }
    @keyframes toastSlide {
        from { transform: translate(-50%, -30px); opacity: 0; }
        to { transform: translate(-50%, 0); opacity: 1; }
    }
    .toast-icon {
        margin-right: 10px;
        font-size: 18px;
    }
    .toast-success { background: #67c23a; }
    .toast-error { background: #f56c6c; }
</style>

<script>
// 新增弹窗函数
function showToast(message, type = 'success') {
    const iconMap = {
        success: '✓',
        error: '✕'
    };
    
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `
        <span class="toast-icon">${iconMap[type]}</span>
        ${message}
    `;
    
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.remove();
    }, 2000);
}

// 使用方法
showToast('配置保存成功', 'success');
showToast(`错误: ${result.error}`, 'error');
</script>

在这里插入图片描述

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

GaussDB keep聚合SQL性能优化分析：从123s到18s的优化之路

虽然方案 4 在逻辑上"读了两遍表"（一次聚合 + 一次回查），但两遍扫描是并行分布在不同线程执行的，且第二遍扫描通过 Hash Join 的过滤条件大幅减少了有效数据量。方案 4 在第一阶段就将 1500 万行压缩为 2,355 个品种的最大 seq_no，第二阶段仅用这些 seq_no 精确回查，JOIN 后最多返回约 4,710 行。优先消除排序：对于 “取每组最大值对应行” 的场景，先用