html实现自定义带编辑框的弹窗
时间: 2024-05-12 17:15:44 浏览: 108
可以使用HTML和CSS实现自定义带编辑框的弹窗,具体步骤如下:
1. 创建一个DIV元素,并设置其样式为“display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:9999;”,这个DIV元素将作为弹窗的遮罩层。
2. 在遮罩层内创建另一个DIV元素作为弹窗的主体,设置其样式为“position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;width:500px;height:300px;padding:20px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.5);”,这个DIV元素将作为弹窗的主体。
3. 在弹窗主体内添加需要显示的内容,包括编辑框、按钮等。
4. 添加一个按钮或其他元素触发弹窗的显示,在点击事件中将遮罩层的display属性设置为“block”。
完整代码示例:
HTML代码:
```html
<button id="showPopup">显示弹窗</button>
<div id="popupMask">
<div id="popupBody">
<h2>编辑框弹窗</h2>
<textarea rows="5" cols="50"></textarea>
<button id="closePopup">关闭弹窗</button>
</div>
</div>
```
CSS代码:
```css
#popupMask {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
}
#popupBody {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
width: 500px;
height: 300px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
```
JavaScript代码:
```javascript
var showPopup = document.getElementById("showPopup");
var closePopup = document.getElementById("closePopup");
var popupMask = document.getElementById("popupMask");
showPopup.addEventListener("click", function() {
popupMask.style.display = "block";
});
closePopup.addEventListener("click", function() {
popupMask.style.display = "none";
});
```
阅读全文