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

问题描述

嗨，我开发的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>

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

标签： javascripthtmlmodal-dialogsweetalertsweetalert2

你只需要添加自定义的 CSS 到它。像：将标题对齐到左上角：将这些规则添加到.swal-title：

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

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

  padding: 5px;

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

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

问题描述

解决方案

推荐阅读