html自定义弹窗

最新推荐文章于 2024-08-05 17:58:14 发布

ubstanpy

最新推荐文章于 2024-08-05 17:58:14 发布

阅读量1.8k

点赞数 2

分类专栏：前端文章标签： HTML CSS JavaScript 交互式弹窗前端开发

本文链接：https://blog.csdn.net/alhhhhh_j/article/details/116160710

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>弹窗</title> 
</head>
<style>
#close:hover
{ 
background-color:#aa1111;
border-color:#aa1111;
}
</style>
<body>
<button onclick='show("demo")'>show</button>
<dialog open id='demo' style='display:none;' draggable="true">
<div style="float:left;font-size:6px;font-weight:bold;">这是一个弹窗</div>
<div style="float:right;border:0px;font-size:6px">
<button id='close' style="height:15px;width:20px;color:#ffffff;border:2px;border-color:#f3f3f3;font-size:5px;border-radius:3px;" onclick="getElementById('demo').setAttribute('style','display:none')">×</button>
</div>  
<div style="clear:both">
<p>弹窗文件测试，小哥哥快来玩啊！</p>
</div>
<div style="float:right;">
<button style="color:#ffffff;background:#aa1111;border:0px;font-size:5px;border-radius:3px;display:inline-block;" onclick="getElementById('demo').setAttribute('style','display:none')">关闭</button>
<button style="color:#ffffff;background:#bebcc3;border:0px;font-size:5px;border-radius:3px;display:inline-block;" onclick="getElementById('demo').setAttribute('style','display:none')">取消</button>
</div>
</dialog>
<script>
function show(id){
document.getElementById(id).setAttribute('style','display:block;padding:2px;border: medium double #bebcc3;border-radius:5px;')
}	
</script>
</body>
</html>