js 怎么美化confirm

JS 美化 confirm 的方法有：使用自定义模态框、利用现成的 UI 库、添加 CSS 动画效果。其中，使用自定义模态框 是一种高效且灵活的方法，可以完全控制样式和功能。接下来，我将详细描述如何使用自定义模态框来美化 confirm 弹窗。

一、使用自定义模态框

自定义模态框可以让你完全掌控弹窗的样式、内容和行为。首先，我们需要在 HTML 中添加一个模态框的结构，然后使用 CSS 来美化它，最后通过 JavaScript 来控制它的显示和隐藏。

1. 创建模态框的 HTML 结构

我们需要在 HTML 文件中添加一个模态框的结构，通常包含一个容器和内容区域。

<div id="custom-confirm" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <p>Are you sure you want to proceed?</p>
    <button id="confirm-yes">Yes</button>
    <button id="confirm-no">No</button>
  </div>
</div>

2. 使用 CSS 来美化模态框

接下来，使用 CSS 来设置模态框的样式，使其美观。

/* 模态框背景 */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: rgb(0,0,0);
  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;
}

3. 使用 JavaScript 控制模态框

最后，使用 JavaScript 来控制模态框的显示和隐藏，以及处理用户的选择。

document.getElementById('confirm-yes').onclick = function() {
  // 用户点击了“是”，在这里处理确认逻辑
  document.getElementById('custom-confirm').style.display = 'none';
  console.log('User confirmed');
};
document.getElementById('confirm-no').onclick = function() {
  // 用户点击了“否”，在这里处理取消逻辑
  document.getElementById('custom-confirm').style.display = 'none';
  console.log('User cancelled');
};
document.querySelector('.close-button').onclick = function() {
  document.getElementById('custom-confirm').style.display = 'none';
};
window.onclick = function(event) {
  if (event.target == document.getElementById('custom-confirm')) {
    document.getElementById('custom-confirm').style.display = 'none';
  }
};
// 显示模态框的函数
function showCustomConfirm() {
  document.getElementById('custom-confirm').style.display = 'block';
}

现在，你可以通过调用 showCustomConfirm() 函数来显示这个自定义的 confirm 弹窗。

二、利用现成的 UI 库

使用现成的 UI 库如 SweetAlert、Bootstrap 等，可以快速实现美观的 confirm 弹窗。

1. 使用 SweetAlert

SweetAlert 是一个非常流行的库，用于创建美观的弹窗。

<!-- 引入 SweetAlert 的 CSS 和 JS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

使用 SweetAlert 创建 confirm 弹窗非常简单：

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

2. 使用 Bootstrap 的模态框

Bootstrap 提供了非常强大的模态框组件，可以用于创建自定义的 confirm 弹窗。

<!-- 引入 Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 引入 jQuery 和 Bootstrap 的 JS 文件 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

创建 Bootstrap 模态框的 HTML 结构：

<div class="modal" id="bootstrapConfirmModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">Confirm</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        Are you sure you want to proceed?
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="bootstrapConfirmYes">Yes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

使用 JavaScript 控制 Bootstrap 模态框的显示和处理用户选择：

$('#bootstrapConfirmYes').click(function() {
  // 用户点击了“是”，在这里处理确认逻辑
  $('#bootstrapConfirmModal').modal('hide');
  console.log('User confirmed');
});
// 显示模态框的函数
function showBootstrapConfirm() {
  $('#bootstrapConfirmModal').modal('show');
}

三、添加 CSS 动画效果

为模态框添加 CSS 动画效果，可以使弹窗更加生动和吸引人。

1. 使用 CSS 动画

你可以在 CSS 中添加动画效果，例如淡入淡出效果：

/* 淡入效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 淡出效果 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.modal {
  animation: fadeIn 0.5s;
}
.modal.hide {
  animation: fadeOut 0.5s;
}

在 JavaScript 中控制动画效果：

function showCustomConfirm() {
  const modal = document.getElementById('custom-confirm');
  modal.classList.remove('hide');
  modal.style.display = 'block';
}
document.querySelector('.close-button').onclick = function() {
  const modal = document.getElementById('custom-confirm');
  modal.classList.add('hide');
  setTimeout(() => { modal.style.display = 'none'; }, 500);
};

2. 使用 JavaScript 动画库

你还可以使用 JavaScript 动画库如 Animate.css 或 GSAP 来为模态框添加更加复杂的动画效果。

例如，使用 Animate.css：

<!-- 引入 Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

在 HTML 结构中添加动画类：

<div id="custom-confirm" class="modal animate__animated">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <p>Are you sure you want to proceed?</p>
    <button id="confirm-yes">Yes</button>
    <button id="confirm-no">No</button>
  </div>
</div>

在 JavaScript 中控制动画效果：

function showCustomConfirm() {
  const modal = document.getElementById('custom-confirm');
  modal.classList.remove('animate__fadeOut');
  modal.classList.add('animate__fadeIn');
  modal.style.display = 'block';
}
document.querySelector('.close-button').onclick = function() {
  const modal = document.getElementById('custom-confirm');
  modal.classList.remove('animate__fadeIn');
  modal.classList.add('animate__fadeOut');
  setTimeout(() => { modal.style.display = 'none'; }, 500);
};

四、使用自定义脚本

除了使用现成的库和 CSS 动画外，你还可以编写自定义脚本来实现更多个性化的效果。

1. 自定义背景模糊效果

你可以在模态框弹出时模糊背景，增加视觉效果：

/* 背景模糊 */
.blur-background {
  filter: blur(5px);
}

在 JavaScript 中控制背景模糊效果：

function showCustomConfirm() {
  const modal = document.getElementById('custom-confirm');
  const body = document.querySelector('body');
  body.classList.add('blur-background');
  modal.style.display = 'block';
}
document.querySelector('.close-button').onclick = function() {
  const modal = document.getElementById('custom-confirm');
  const body = document.querySelector('body');
  body.classList.remove('blur-background');
  modal.style.display = 'none';
};

通过结合以上几种方法，你可以创建一个美观且功能强大的自定义 confirm 弹窗，以替代原生的 confirm() 方法。这不仅能提升用户体验，还能使你的网页更加现代和专业。