js确定框怎么设置样式

设置JavaScript确认框样式的几个方法包括：使用自定义弹窗、使用第三方库、使用CSS和HTML技术。其中，自定义弹窗是一种常用且灵活的方法，可以完全控制弹窗的外观和功能。

自定义弹窗提供了极大的灵活性，可以根据项目需求设置样式、动画效果和功能。它的实现步骤包括创建HTML结构、编写CSS样式和编写JavaScript逻辑。通过这种方式，你可以确保弹窗的外观与网站的整体设计风格保持一致，并且可以添加更多的交互功能。

一、使用自定义弹窗

1、创建HTML结构

首先，我们需要在HTML中创建一个基础的弹窗结构。这可以通过在页面中添加一个隐藏的div来实现。

<div id="customConfirm" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <p id="confirmMessage">Are you sure?</p>
    <button id="confirmYes">Yes</button>
    <button id="confirmNo">No</button>
  </div>
</div>

2、编写CSS样式

接下来，我们需要编写CSS来设置弹窗的样式。这样可以确保弹窗在显示时看起来美观，并且与网站的整体设计风格保持一致。

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
.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逻辑来控制弹窗的显示和隐藏。通过这种方式，可以在需要时显示确认框，并在用户作出选择后执行相应的操作。

function showCustomConfirm(message, onYes, onNo) {
  // Get the modal
  var modal = document.getElementById("customConfirm");
  // Get the elements
  var messageElem = document.getElementById("confirmMessage");
  var yesBtn = document.getElementById("confirmYes");
  var noBtn = document.getElementById("confirmNo");
  var closeBtn = document.querySelector(".close-button");
  // Set the message
  messageElem.textContent = message;
  // When the user clicks on <span> (x), close the modal
  closeBtn.onclick = function() {
    modal.style.display = "none";
    if (onNo) onNo();
  }
  // When the user clicks on Yes button
  yesBtn.onclick = function() {
    modal.style.display = "none";
    if (onYes) onYes();
  }
  // When the user clicks on No button
  noBtn.onclick = function() {
    modal.style.display = "none";
    if (onNo) onNo();
  }
  // Show the modal
  modal.style.display = "block";
}

4、调用自定义弹窗

在需要显示确认框的地方，可以调用showCustomConfirm函数，并传递相应的参数。

document.getElementById("myButton").onclick = function() {
  showCustomConfirm("Do you really want to proceed?", function() {
    console.log("User clicked Yes");
  }, function() {
    console.log("User clicked No");
  });
};

通过以上步骤，我们可以实现一个自定义的确认框，并根据需要设置其样式和功能。

二、使用第三方库

1、SweetAlert2

SweetAlert2是一个流行的JavaScript库，可以用来创建美观且可定制的弹窗。它非常易于使用，并且提供了丰富的配置选项。

安装SweetAlert2

可以通过CDN引入SweetAlert2，或者使用npm进行安装。

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

或者使用npm安装：

npm install sweetalert2

使用SweetAlert2

使用SweetAlert2创建一个确认框非常简单，只需要几行代码。

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、使用其他第三方库

除了SweetAlert2，还有其他第三方库可以用来创建确认框，例如Bootbox.js和Noty.js。这些库同样提供了丰富的配置选项，可以根据项目需求选择合适的库。

三、使用CSS和HTML技术

除了使用JavaScript和第三方库，还可以通过纯CSS和HTML技术来创建确认框。这种方法适用于一些简单的场景，但在功能和样式定制方面可能不如前两种方法灵活。

1、使用CSS和HTML创建确认框

可以通过使用CSS和HTML来创建一个基础的确认框。

<div id="simpleConfirm" class="simple-modal">
  <div class="simple-modal-content">
    <p>Are you sure?</p>
    <button onclick="confirmAction()">Yes</button>
    <button onclick="cancelAction()">No</button>
  </div>
</div>

2、编写CSS样式

.simple-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.simple-modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

3、编写JavaScript逻辑

function showSimpleConfirm() {
  document.getElementById("simpleConfirm").style.display = "block";
}
function confirmAction() {
  document.getElementById("simpleConfirm").style.display = "none";
  // Perform the action for "Yes"
}
function cancelAction() {
  document.getElementById("simpleConfirm").style.display = "none";
  // Perform the action for "No"
}

4、调用确认框

在需要显示确认框的地方，可以调用showSimpleConfirm函数。

document.getElementById("mySimpleButton").onclick = function() {
  showSimpleConfirm();
};

通过以上方法，可以使用纯CSS和HTML技术创建一个基础的确认框。

四、总结

设置JavaScript确认框的样式可以通过多种方法实现，包括自定义弹窗、使用第三方库，以及使用CSS和HTML技术。自定义弹窗提供了最大的灵活性，可以完全控制弹窗的外观和功能。第三方库如SweetAlert2则提供了丰富的配置选项，易于使用且美观。CSS和HTML技术适用于一些简单的场景，但在功能和样式定制方面可能不如前两种方法灵活。

在实际项目中，可以根据具体需求选择合适的方法。如果需要一个功能强大且美观的确认框，建议使用SweetAlert2等第三方库；如果需要完全自定义的样式和功能，可以选择自定义弹窗的方式。无论选择哪种方法，都可以通过适当的CSS和JavaScript来确保确认框与网站的整体设计风格保持一致。

js确定框怎么设置样式

一、使用自定义弹窗

1、创建HTML结构

2、编写CSS样式

3、编写JavaScript逻辑

4、调用自定义弹窗

二、使用第三方库

1、SweetAlert2

安装SweetAlert2

使用SweetAlert2

2、使用其他第三方库

三、使用CSS和HTML技术

1、使用CSS和HTML创建确认框

2、编写CSS样式

3、编写JavaScript逻辑

4、调用确认框

四、总结

相关问答FAQs：