用HTML写一个好看的alert弹窗
时间: 2023-07-16 13:12:06 浏览: 55
以下是一个简单的 HTML 和 CSS 代码,可以创建一个好看的 alert 弹窗:
HTML 代码:
```html
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>注意!</strong> 这是一个弹窗。
</div>
```
CSS 代码:
```css
/* 定义弹窗样式 */
.alert {
padding: 20px;
background-color: #f44336;
color: white;
border-radius: 5px;
font-size: 16px;
text-align: center;
position: relative;
}
/* 定义关闭按钮样式 */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* 鼠标悬停时修改关闭按钮样式 */
.closebtn:hover {
color: black;
}
```
你可以将这些代码复制粘贴到一个 HTML 文件中,并在浏览器中打开以查看效果。
相关问题
alert弹窗定位
alert()函数弹窗的定位是由浏览器自动决定的,通常位于屏幕中央或者浏览器窗口的顶部。如果需要自定义弹窗的位置,可以使用其他的 JavaScript 弹窗库,如jQuery UI、Bootstrap Modal等。这些库提供了更多的定制化选项,可以让我们更加灵活地控制弹窗的位置、大小和样式等。例如,使用Bootstrap Modal可以通过设置modal-dialog的样式来调整弹窗的位置和大小,如下所示:
```html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="position: absolute; top: 100px; left: 100px; width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Content
</div>
</div>
</div>
</div>
```
这个例子中,我们使用了Bootstrap Modal,并通过设置modal-dialog的样式来将弹窗定位在屏幕的(100, 100)位置,并设置它的宽度为400像素。这样就可以实现自定义弹窗的定位和大小。
触发器弹窗,写一个demo
以下是一个简单的触发器弹窗的demo,使用了JavaScript和HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>触发器弹窗示例</title>
<script>
function showPopup() {
alert("触发器弹窗");
}
</script>
</head>
<body>
<h1>触发器弹窗示例</h1>
<p>点击下面的按钮触发弹窗:</p>
<button onclick="showPopup()">弹出窗口</button>
</body>
</html>
```
在这个示例中,定义了一个名为`showPopup`的JavaScript函数,该函数使用`alert`函数弹出一个提示框。HTML中使用`button`元素创建了一个按钮,当点击这个按钮时,触发了`showPopup`函数,从而弹出了提示框。这就是一个简单的触发器弹窗的示例。