html css 实现对话框右上角的删除按钮

最新推荐文章于 2025-03-24 19:43:44 发布

置顶清澈@Cherry

最新推荐文章于 2025-03-24 19:43:44 发布

阅读量1.3w

点赞数 1

分类专栏：前端文章标签： html 对话框

本文链接：https://blog.csdn.net/nihaoqiulinhe/article/details/80854673

版权

前端专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何在对话框右上角添加一个删除按钮。通过简单的CSS样式设置及HTML结构定义，实现按钮的位置固定，并确保其具备交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击某一个按钮,弹出对话框,需要在右上角添加删除按钮,其实很简单,需要创建一个对话框div,然后用css样式,固定位置top和right,如下:

(1)右上角的删除按钮css样式为:

.delete_right {
    display: block;
    cursor: pointer;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 22px;
    right: 30px;
    background: url(../img/icons.png) -48px -96px no-repeat;
}

(2)html代码为:

<div ng-show="base_view" class="labletitle"
	style="top: 54px; left: 0px;width: 70%; margin-top: 2%;margin-left: 22%;margin-right: 10%; background-color: #F7F4F4;   -webkit-box-shadow: 0 8px 20px rgba(100, 100, 100, 0.85); z-index: 10;">
    <a class="delete_right"></a></div>