如果要在HTML表格的右下角出现一个选择框,可以使用input元素和CSS来实现。首先,需要在最后一个单元格中添加一个input元素,并确保该元素位于表格右下角,然后设置input元素的type属性为"checkbox",最后设置CSS来将其呈现为单独的选择框即可。首先根据需求我们需要一个按钮,一个弹出窗口层;\x0d\x0aOK,废话不多说;\x0d\x0a按钮就用一个基本的:\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分:\x0d\x0a首先需要引入一个JS库,版本自己定义:\x0d\x0a然后给按钮添加相应的点击事件,让点击button的时候,显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a})
回答于 2022-11-16
<div class="mask-box"></div>
<div class="dialog-box">
弹窗内容
</div>
通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为弹窗容器,里面写弹窗的内容。
通过控制样式,切换 display:block display: none实现点击出现、点击关闭弹窗。
.mask-box{
/* 切换 display:block display: none*/
position: fixed
left: 0
right: 0
top: 0
bottom: 0
background:rgba(0,0,0,0.7)
z-index: 98
}
.dialog-box{
/* 切换 display:block display: none*/
position: fixed
left: 50%
top: 50%
transform: translate(-50%,-50%)
width: 300px
height: 200px
background: #fff
/* 按实际情况 设置z-index */
z-index: 98
}