js alert 换行居中

在JavaScript中，alert函数用于显示一个带有消息的模态对话框。然而，alert函数本身并不支持复杂的格式设置，如换行或居中对齐。这是因为alert的设计初衷是为了简单快速地通知用户，而不是用于展示复杂的布局或样式。

基础概念

模态对话框：一种不允许用户在关闭之前与应用程序的其余部分交互的窗口。
alert：JavaScript中的一个内置函数，用于显示简单的警告框。

类型与应用场景

类型：仅限于文本消息的显示。
应用场景：错误提示、操作确认、重要信息的即时通知。

遇到的问题及解决方法

如果你需要在弹窗中实现换行和居中，可以考虑使用其他方法替代alert，例如使用HTML和CSS创建自定义的模态对话框。

示例代码

以下是一个使用HTML、CSS和JavaScript创建自定义模态对话框的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Modal</title>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    text-align: center;
  }
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
</style>
</head>
<body>

<button onclick="openModal()">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <p>This is a custom modal<br>with centered text.</p>
  </div>
</div>

<script>
function openModal() {
  document.getElementById('myModal').style.display = 'block';
}

function closeModal() {
  document.getElementById('myModal').style.display = 'none';
}
</script>

</body>
</html>