Sweetaler2 target opt ​​- глотать все еще за пределами цели - PullRequest
Новая
       100

Sweetaler2 target opt ​​- глотать все еще за пределами цели

2 голосов
/ 12 апреля 2020

Я попытался выбрать целевой вариант в sweetalert2, но тост все еще появляется за пределами цели

что я делаю не так?

вот код 

#trial {
    position: absolute;
    display: block;
    height:200px;
    width: 500px;
    border: 1px solid;
}

<div id="trial"></div>

<script>
$(document).ready(function() {
    var id = document.getElementById('trial');
    Swal.fire({
        title: 'I will be placed inside the #swal2-container',
        toast: true,
        target: id,
        position: 'bottom-left'
    });
}); 
</script>

Вот результат:

enter image description here

1 Ответ

1 голос
/ 12 апреля 2020

С атрибутом target все, что происходит, это то, что DOM-контейнер .swal2-container добавляется к целевому элементу, но имеет стиль position: fixed;, и вам нужно будет переопределить его, как показано ниже: 

$(document).ready(function() {
  var id = document.getElementById('trial');
  Swal.fire({
    title: 'I will be placed inside the #swal2-container',
    toast: true,
    target: id,
    position: 'bottom-left'
  });
});
#trial {
  position: relative;
  left: 50px;
  display: block;
  height: 200px;
  width: 500px;
  border: 1px solid;
}

.swal2-container{
  position: absolute !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<div id="trial"></div>
...