HTML自定义弹出框
2021/5/12 18:26:16
本文主要是介绍HTML自定义弹出框,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
因为alert()有时候不能满足使用,所以百度了一个弹窗。我稍微改了一下样式。
原创在这里:https://blog.csdn.net/xi_haibin/article/details/84965929
弹窗效果如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>delete</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> function del(){ /* 显示 */ document.getElementById("delete").style.display="block"; } function delesc(){ /* 隐藏 */ document.getElementById("delete").style.display="none"; } </script> </head> <body> <!-- 按钮 --> <input onclick="del()" type="button" value="删除" style="width: 100px;height: 45px;border: 0px;border-radius: 5px;background-color: #0271CD;color: white;"> <!-- 删除确认框 --> <div id="delete" style="border: 1px solid;width: 100%;margin:0 auto;height: 100%;position: fixed;left: 0px;top: 0px;background: rgb(0,0,0,0.6);overflow: auto;text-align: center;display: none;"> <div style="background: white;width: 250px;height: 150px;margin: auto;margin-top: 50px;border-radius: 5px;border:solid 2px #00bcd4;"> <div style="height: 110px;"> <!-- 框内内容 --> <div style="font-size: 0.9rem;padding-top: 10px;text-align:justify;"> <p style="text-indent:2em;margin:8px;position: absolute;"> 您确定要删除该项目吗? </p> </div> </div> <div style="height: 39px;"> <div onclick="javascript:window.location.href=''" style="float: left;margin-left:10px;width: 40%;height: 24px;border: 2px solid #00bcd4;line-height: 24px;font-size: 14px;">确认</div> <div onclick="delesc()" style="float: right;margin-right:10px;width: 40%;height: 24px;border: 2px solid #00bcd4;line-height: 24px;font-size: 14px">取消</div> </div> </div> </div> </body> </html>
自定义弹窗能对按钮添加想要的点击事件。比alert()的使用更灵活,也可以修改样式,更好看一些。
这篇关于HTML自定义弹出框的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南
- 2024-11-12滚动吸顶资料:新手入门教程
- 2024-11-12盒子模型资料详解:初学者必看教程
- 2024-11-12前端案例资料:新手入门必备教程与实战案例
- 2024-11-11HTML10项目实战:新手入门教程
- 2024-11-09如何高效分发任务?推荐6款超实用任务管理工具
- 2024-11-08J人天选APP:3个神器,助你高效管理项目