js alert modal

alert 是 JavaScript 中的一个内置函数，用于在浏览器中显示一个简单的对话框，通常包含一条消息和一个“确定”按钮。这个对话框会阻止用户的交互，直到用户点击“确定”按钮。alert 是一种非常基础的模态（modal）对话框形式。

基础概念

模态对话框（Modal Dialog）：是一种用户界面元素，它会暂时阻止用户与其他界面元素交互，直到用户与对话框本身进行交互。模态对话框通常用于显示重要信息、警告、错误或需要用户确认的操作。

优势

简单易用，无需复杂的代码即可实现。
强制用户注意力，确保信息被看到。

类型

Alert：简单的警告框，只有一个“确定”按钮。
Confirm：确认框，有两个按钮，通常是“确定”和“取消”，用于获取用户的确认或拒绝。
Prompt：提示框，允许用户输入数据，通常有两个按钮，“确定”和“取消”。

应用场景

显示错误信息。
确认用户是否真的想要执行某个可能带来后果的操作。
请求用户输入必要的信息。

示例代码

// 使用 alert 显示一个警告框
alert('这是一个警告信息！');

// 使用 confirm 显示一个确认框，并根据用户的选择执行操作
if (confirm('你确定要删除这个文件吗？')) {
    // 用户点击了“确定”
    console.log('文件已删除');
} else {
    // 用户点击了“取消”
    console.log('删除操作已取消');
}

// 使用 prompt 获取用户输入
let userInput = prompt('请输入你的名字：', '默认名字');
if (userInput !== null) {
    console.log('你好，' + userInput + '！');
} else {
    console.log('用户没有输入名字');
}

遇到的问题及解决方法

过度使用 alert：频繁使用 alert 会打断用户体验，导致用户感到烦恼。解决方法是使用自定义的模态对话框，可以通过 HTML、CSS 和 JavaScript 来创建更加友好和美观的对话框。
阻塞用户操作：alert 会阻塞页面的其他操作，直到用户响应。在某些情况下，这可能不是理想的用户体验。解决方法是使用非阻塞的通知方式，如自定义的模态对话框或者通知条。
样式和交互限制：alert 对话框的样式和交互非常有限，不能满足复杂的用户界面需求。解决方法是使用前端框架（如 React、Vue 或 Angular）和 UI 库（如 Bootstrap、Material-UI）来创建自定义的模态对话框。

自定义模态对话框示例

<!-- HTML -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <p>这是一个自定义的模态对话框。</p>
    <button id="confirmButton">确定</button>
  </div>
</div>

<!-- CSS -->
<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%;
}
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>

<!-- JavaScript -->
<script>
// 获取模态对话框元素
var modal = document.getElementById("myModal");

// 获取关闭按钮元素
var closeButton = document.getElementsByClassName("close-button")[0];

// 获取确定按钮元素
var confirmButton = document.getElementById("confirmButton");

// 显示模态对话框的函数
function showModal() {
    modal.style.display = "block";
}

// 关闭模态对话框的函数
closeButton.onclick = function() {
    modal.style.display = "none";
}
confirmButton.onclick = function() {
    modal.style.display = "none";
    // 执行确定后的操作
    console.log('用户点击了确定');
}

// 点击窗口外部关闭模态对话框
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// 调用函数显示模态对话框
showModal();
</script>

在这个示例中，我们创建了一个简单的自定义模态对话框，它可以通过点击关闭按钮、确定按钮或者窗口外部来关闭。这种方式提供了更多的样式和交互选项，可以更好地融入网站的整体设计中。