javascript - 如何在swal模式中将标题调整到左上方

嗨，我开发的swal模态看起来像

我希望输出看起来像下面的图像

无论如何都可以减小按钮的尺寸并将确认文本放在左上方

下面是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Add Checkbox dynamically to table cell using JavaScript</title>
    <style>
    .swal-modal {
        width: 350px;
      height: 200px
        }

.swal-title {
  margin: 0px;
  font-size: 20px;
  box-shadow: 0px 1px 1px ;
  margin-bottom: 20px;

  align-self: top
}
.swal-text {
  font-size: 23px;
}
.swal-footer {
  background-color: white;
  margin-top: 10px;
  border-top: 1px solid #E9EEF1;
  overflow: hidden;
}
</style>
</head>
<body>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body><script>
  swal({

   title:"Confimation ?",

   text:'Do you want to save',

  buttons: {
    confirm: {
      width:5,
    text: "Save",
    value: 'save',
    visible: true,
    className: "",
   closeModal: true
  },
  cancel: {
     width:15,
    text: "Cancel",
    value: 'cancel',
    visible: true,
    className: "",
     closeModal: true
  }
  }
})
.then((value) => {

  switch (value) {

    case "save":
      alert('you selected:  ' + value);
      break;

    case "cancel":
        alert('you selected:  ' + value);
      break;
 }
});
</script>
</html>

有什么办法可以做到这一点

最佳答案

您只需要向其中添加自定义CSS。喜欢：
将标题对齐到左上方：
将这些规则添加到.swal-title：

      text-align: left;
      margin-top: 0 !important;

要缩小按钮，请将这些代码添加到.swal-button：

  padding: 5px;

您的JavaScript代码也错过了}并且无法正常工作，请参见此处：http://jsfiddle.net/uxd57of2/

关于javascript - 如何在swal模式中将标题调整到左上方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61653135/