https://www.frippislandresort.com/javascripts/js/toast.js?v=99

1// Custom BE Toast Function
2$.fn.beToast = function (options) {
3
4  var settings = $.extend({
5    headerBGColor: 'white-bg',
6    icon: 'bell-solid',
7    iconColor: 'site-color-1',
8    title: 'Notification',
9    titleColor: 'site-color-1',
10    body: '',
11    bodyColor: 'body-font-color',
12    bodyBGColor: 'white-bg',
13    delay: 3000,
14    close: true,
15    closeColor: 'body-font-color',
16    autoHide: true
17  }, options);
18
19  // Create Custom Toast
20  var container = $('.i-toasts');
21  return container.append(`
22    <div class="toast show" role="alert">
23      <div class="toast-header ${settings.headerBGColor}">
24        <svg class="icon toast-icon ${settings.icon} ${settings.iconColor}">
25          <title>${settings.icon}</title>
26          <use href="#${settings.icon}"></use>
27        </svg>
28        <strong class="toast-title ${settings.titleColor} mr-auto">${settings.title}</strong>
29        ${settings.close == false ? '' : `
30          <button class="toast-close ${settings.closeColor}">
31            <svg class="icon">
32              <title>Close</title>
33              <use href="#times-solid"></use>
34            </svg>
35          </button>
36        `}
37      </div>
38      ${settings.body == '' ? '' : `
39        <div class="toast-body ${settings.bodyBGColor} ${settings.bodyColor}">${settings.body}</div>
40      `}
41    </div>
42  `).find('.toast:last')
43  .delay(100)
44  .queue(function (showToast) {
45    $(this).addClass('in');
46    showToast();
47  })
48  .delay(settings.delay)
49  .queue(function (hideToast) {
50    if (settings.autoHide == true) {
51      $(this).removeClass('in');
52      hideToast();
53    }
54  })
55  .delay(200)
56  .queue(function (removeToast) {
57    if (settings.autoHide == true) {
58      $(this).remove();
59      removeToast();
60    }
61  });
62
63}
64
65$(document).ready(function () {
66
67  // BE - Toast - Close Toast
68  $(document).on('click', '.i-toasts .toast-close', function () {
69    $(this).closest('.toast').remove();
70  });
71
72});
73
74// Toast Notification:
75// You can use Class Color Names for the Colors (from colors.css)
76// Even Bootstrap Class Color Names
77// Make sure that the below code is used in your click event to show the Toast
78// Each Option has a default, so you can use all or none, whatever you need
79// - EXAMPLE BELOW -
80
81/*
82
83$.fn.beToast({
84  headerBGColor: 'site-color-1-bg',
85  icon: 'bolt-solid',
86  iconColor: 'white',
87  title: 'Popular Search!',
88  titleColor: 'white',
89  closeColor: 'white',
90  body: 'Your search criteria is popular!'
91});
92
93*/