как настроить заголовок в модальном ласточке вверху слева - PullRequest
Новая
       117

как настроить заголовок в модальном ласточке вверху слева

0 голосов
/ 07 мая 2020

Привет, swal modal , который я разработал, выглядит как

enter image description here

Я хотел, чтобы результат выглядел как изображение ниже

enter image description here

есть ли способ уменьшить размер кнопок и поместить текст подтверждения в верхний левый угол

ниже мой код 

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

есть ли способ достичь этого

Ответы [ 2 ]

1 голос
/ 07 мая 2020

вам просто нужно добавить к нему индивидуальный CSS. например: чтобы выровнять заголовок по верхнему левому краю: добавьте эти правила в .swal-title: 

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

, чтобы уменьшить кнопку, добавьте этот код в .swal-button: 

  padding: 5px;

также ваш код javascript пропустил } и не работает, рабочий простой см. здесь: http://jsfiddle.net/uxd57of2/

0 голосов
/ 19 мая 2020

Вы можете добавить дополнительные css для всплывающего окна с приятным предупреждением. 

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