Html5自定义dialog

最新推荐文章于 2024-06-25 08:00:28 发布

sqyNick

最新推荐文章于 2024-06-25 08:00:28 发布

阅读量3.6k

点赞数 1

分类专栏： Web前端 Java 文章标签： html5 前端自定义Dialog

本文链接：https://blog.csdn.net/u010670151/article/details/51364081

版权

Java 同时被 2 个专栏收录

46 篇文章 2 订阅

订阅专栏

Web前端

24 篇文章 0 订阅

订阅专栏

Html5自定义dialog

Css样式：

.dv_dialog_box{
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 2000;
   position: absolute;
   background-color: rgba(0,0,0,0.6);
}
.dv_dialog{
   width: 300px;
   height: 100px;
   margin-left: 600px;
   margin-top: 300px;
   background-color: #fff;
   border-radius: 8px;
}
.dv_title{
   padding-left: 15px;
   width: 300px;
   height: 60px;
   font-size: 25px;
   line-height: 25px;
   font-family: "Microsoft YaHei";
}
.dv_btn{
   width: 300px;
   height: 30px;
}
.dialog_btn{
   width: 140px;
   height: 30px;
   border: 1px solid #858585;
   outline: none;
   border-radius: 6px;
   cursor: pointer;
   background-color: #fff;
   margin-left: 5px;
   font-family: "Microsoft YaHei";
}

Js代码：

$(".btn_delete").click(function(){
       var t='<div class="dv_dialog_box">';
       t+=' <div class="dv_dialog">';
       t+=' <div class="dv_title">确定删除该信息？</div>';
       t+='<div class="dv_btn">';
       t+='<button class="dialog_btn">删除</button>';
       t+='<button class="dialog_btn">取消</button>';
       t+='</div>';
       t+=' </div>';
       t+='</div>';
       $(t).appendTo("body");
       $(".dialog_btn").click(function(){
           $(".dv_dialog_box").remove();
       });
 
   });

Html代码：

<body>
<button class="btn_delete">删除</button>
</body>

效果展示：

sqyNick

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5自定义dialog

Html5自定义dialog
复制链接

扫一扫

专栏目录