首页 > Web开发 > 详细

HTML自定义弹出框

时间:2021-05-12 21:12:55      阅读:30      评论:0      收藏:0      [点我收藏+]

因为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自定义弹出框

原文:https://www.cnblogs.com/qinjunlin/p/14760893.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!