如何将swal模式中的标题调整到左上角答案

【问题标题】：how to adjust the title in the swal modal to top left如何将swal模式中的标题调整到左上角
【发布时间】：2020-05-07 08:25:26
【问题描述】：

嗨，我开发的 swal modal 看起来像

我希望输出如下图所示

有没有办法减小按钮的大小并将确认文本放在左上角

下面是我的代码

<!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>

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

【问题讨论】：

标签： javascript html modal-dialog sweetalert sweetalert2

【解决方案1】：

您只需为其添加自定义 CSS。像：将标题对齐到左上角：将这些规则添加到.swal-title:

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

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

  padding: 5px;

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

【讨论】：

谢谢。我修改了一些。现在看起来更好了:) jsfiddle.net/4qpskgnt
@Dodododo 是的，只是表明您可以通过添加自定义 css 使其变得更好或满足您的要求

【解决方案2】：

您可以为甜蜜的警报弹出添加额外的 css。

<style>
.swal-title{
    text-align: left;
    margin-top: 0 !important;
}
.swal-text {  
    display: block;
    text-align: left;
}
</style>

【讨论】：