js 苹果风格提醒框—代码示例

JS苹果风格提醒框是一种常用的界面组件，用于在网页中显示用户提示、警告或确认信息。它通常以一个弹出框的形式出现在页面上方，并包含一个标题、一段文字内容和一个或多个按钮。下面是一个示例代码，展示如何使用JS实现一个简单的苹果风格提醒框。

我们需要创建一个HTML元素，用于显示提醒框的内容。可以使用<div>元素作为容器，并在其中添加标题和内容。示例代码如下：

<div id="alertBox" class="96b4-c52b-3e1e-4c8f alert">
  <h2 id="alertTitle">提示</h2>
  <p id="alertContent">这是一个示例提醒框。</p>
</div>

接下来，我们使用CSS样式为提醒框添加样式，使其呈现苹果风格的外观。示例代码如下：

.alert {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 300px;
  margin: 0 auto;
}
#alertTitle {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
#alertContent {
  font-size: 14px;
}

然后，我们使用JavaScript代码来控制提醒框的显示和隐藏。可以通过修改提醒框的样式属性来实现。示例代码如下：

function showAlert() {
  var alertBox = document.getElementById("alertBox");
  alertBox.style.display = "block";
}
function hideAlert() {
  var alertBox = document.getElementById("alertBox");
  alertBox.style.display = "none";
}

我们可以在页面中的某个事件触发时调用这些函数，以显示或隐藏提醒框。示例代码如下：

document.getElementById("showButton").addEventListener("click", showAlert);
document.getElementById("hideButton").addEventListener("click", hideAlert);

通过以上代码，我们可以在页面中创建一个苹果风格的提醒框，并通过点击按钮来显示或隐藏它。这是一个简单的示例，你可以根据实际需求进行样式和功能的扩展。