Тосты невидимы и не могут быть закрыты в Bootstrap 4 - PullRequest
Новая
       22

Тосты невидимы и не могут быть закрыты в Bootstrap 4

0 голосов
/ 24 мая 2019

Моя цель - сделать так, чтобы тосты казались плавающими по моему контенту в углу экрана.Я использую asp.net MVC core 2, который поставляется с начальной загрузкой 4.Мой другой загрузочный материал работает хорошо.

Для этого я ознакомился с различными учебными пособиями, в частности с этим .

Я вставляю любой из этих примеров кода в итост появляется на странице, но его непрозрачность установлена ​​на 0, поэтому он невидим (в соответствии с boostrap css для класса .toast).

Он упоминает, что «вы должны инициализировать их самостоятельно», но не объясняет, инициализируетсяони устанавливают непрозрачность на 1 или нет.

Внизу есть некоторый код, javascript, но неясно, нужно вам это или нет.Из-за начального комментария вам нужно было вызвать один или несколько из этих методов, я добавил $('.toast').toast(); $('.toast').show(); внизу моей страницы в теге скрипта.

Во-первых, проблемы не возникают, когда этот javascript выполняетсяи нет никаких ошибок консоли, тост остается невидимым.

Во-вторых, тост занимает место на странице, даже если он скрыт, когда я хочу, чтобы он всплыл поверх в углу экрана.Это несмотря на использование примера, который, по-видимому, делает это в разделе «Размещение» - хотя первый div расположен относительно, что кажется странным, я бы ожидал, что он будет абсолютным.

В-третьих, я хочу отобразить любое числотосты.Но это, вероятно, нормально, потому что я могу сделать функцию javascript, чтобы каждый раз вставлять все html на страницу, хотя это кажется неудобным - разве вы не можете просто определить шаблон для предупреждения и загружать его с помощью собственного сообщения / заголовка?

Во-вторых, крестик в углу тоста не работает, чтобы закрыть его, несмотря на атрибут data-dismiss="toast".

Не могу не почувствовать, что чего-то не хватает, но я ссылаюсь на загрузчикCSS и JS файлы.Я перепробовал множество примеров, но у всех было одинаковое поведение.

Есть идеи?

Редактировать: Создал скрипку здесь здесь, вы можете видеть, что явручную добавили JS, чтобы изменить непрозрачность.Предупреждения занимают место, хотя.

1 Ответ

1 голос
/ 24 мая 2019

Я понимаю, что когда вы инициализируете его без какой-либо опции, он появляется и исчезает мгновенно.

так попробуйте это: 

  $('.toast').toast({
    'autohide': false
  });

  $('.toast').toast('show');

Я только что вставил вышеупомянутые строки кода в вашу скрипку, и она появляется. https://jsfiddle.net/fyb3wh8c/2/

...