正文

轻松掌握：一招教你自定义JS alert弹出框样式，告别默认枯燥！

/0 浏览量
0711

在网页开发中，alert弹窗是一个常用的功能，用于向用户显示一些重要的信息或警告。然而，默认的alert弹窗样式往往比较单调，不够吸引人。今天，我就来教大家一招，轻松自定义JS alert弹出框的样式，让你的网页更加生动有趣！

1. 使用自定义弹窗模板

首先，我们可以通过创建一个自定义的弹窗模板来实现样式的自定义。以下是一个简单的HTML和CSS代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义Alert弹窗</title>
<style>
  .custom-alert {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  .custom-alert-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .custom-alert-message {
    margin-bottom: 20px;
  }

  .custom-alert-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="custom-alert" id="customAlert">
  <div class="custom-alert-header">标题</div>
  <div class="custom-alert-message">这是一条自定义的alert消息</div>
  <button class="custom-alert-btn" onclick="closeAlert()">确定</button>
</div>

<script>
  function showAlert() {
    var alert = document.getElementById('customAlert');
    alert.style.display = 'block';
  }

  function closeAlert() {
    var alert = document.getElementById('customAlert');
    alert.style.display = 'none';
  }
</script>

<button onclick="showAlert()">显示自定义Alert</button>

</body>
</html>

在上面的代码中，我们创建了一个名为custom-alert的div元素，用于显示自定义的alert消息。通过CSS样式，我们可以设置弹窗的位置、大小、边框、背景颜色和阴影等属性。

2. 使用JavaScript控制弹窗显示

接下来，我们需要通过JavaScript来控制弹窗的显示和隐藏。在上面的代码中，我们已经定义了showAlert和closeAlert两个函数，分别用于显示和关闭弹窗。

  • showAlert函数通过修改custom-alert元素的display属性为block来显示弹窗。
  • closeAlert函数通过修改custom-alert元素的display属性为none来关闭弹窗。

3. 调用自定义弹窗

最后，我们只需要在需要显示alert的地方调用showAlert函数即可。在上面的代码中，我们通过一个按钮来触发showAlert函数，从而显示自定义的alert弹窗。

通过以上步骤，你就可以轻松地自定义JS alert弹出框的样式，让你的网页更加生动有趣了！

-- 展开阅读全文 --