你能否用html与JS与CSS写一个古风风格的动态弹窗
时间: 2024-01-26 22:05:18 浏览: 85
当然可以。以下是一个简单的示例代码:
HTML:
```html
<button onclick="showDialog()">打开弹窗</button>
<div id="dialog" class="hidden">
<div class="dialog-content">
<div class="dialog-header">
<h3>标题</h3>
<button onclick="closeDialog()">关闭</button>
</div>
<div class="dialog-body">
<p>这里是内容</p>
</div>
</div>
</div>
```
CSS:
```css
.hidden {
display: none;
}
#dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.dialog-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 400px;
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.dialog-header h3 {
margin: 0;
font-size: 20px;
}
.dialog-body {
margin: 0;
font-size: 16px;
}
```
JS:
```js
function showDialog() {
var dialog = document.getElementById("dialog");
dialog.classList.remove("hidden");
}
function closeDialog() {
var dialog = document.getElementById("dialog");
dialog.classList.add("hidden");
}
```
这个弹窗使用了CSS来创建古风风格的外观,并使用JavaScript来控制弹窗的显示和隐藏。点击按钮将调用showDialog()函数,该函数将删除包含弹窗的“hidden”类,使其可见。关闭按钮调用closeDialog()函数,该函数将添加“hidden”类,以隐藏弹窗。
阅读全文