如何将swal模式中的标题调整为左上角？

Question

你好语态我所开发的似乎是

我希望输出的结果像下面的图片一样。

是否有办法缩小按钮的大小，并把确认文字放在左上角。

以下是我编码

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

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

Answer 1

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

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

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

  padding: 5px;

你的javascript代码也漏掉了一个 } 和不工作，一个工作简单的看到这里。http:/jsfiddle.netuxd57of2。

Answer 2

你可以为甜美的提示弹出添加额外的css。

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

如何将swal模式中的标题调整为左上角？

问题描述投票：0回答：1

1个回答

最新问题

如何将swal模式中的标题调整为左上角？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1