Sticky alerts (Toasts) (Requires JavaScript)

<div class="page-wrapper">
  <!-- This parent container is required -->
  <div class="sticky-alerts"></div>

  <!-- Content wrapper containing the toggles -->
  <div class="content-wrapper">
    ...
    <button class="btn" type="button" onclick="toastAlert()">Toast alert!</button>
    <button class="btn btn-link" type="button" onclick="toastAnotherAlert()">Toast another!</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

<!-- JavaScript -->
<script type="text/javascript">
  // Toasts a default alert
  function toastAlert() {
    var alertContent = "This is a default alert with <a href='#' class='alert-link'>a link</a> being toasted.";
    // Built-in function
    halfmoon.initStickyAlert({
      content: alertContent,      // Required, main content of the alert, type: string (can contain HTML)
      title: "Default alert"      // Optional, title of the alert, default: "", type: string
    })
  }
  
  // Toasts another alert (here, the options are shown)
  function toastAnotherAlert() {
    var alertContent = "This is another alert with <a href='#' class='alert-link'>a link</a> being toasted.";
    // Built-in function
    halfmoon.initStickyAlert({
      content: alertContent,      // Required, main content of the alert, type: string (can contain HTML)
      title: "Another alert",     // Optional, title of the alert, default: "", type: string
      alertType: "",              // Optional, type of the alert, default: "", must be "alert-primary" || "alert-success" || "alert-secondary" || "alert-danger"
      fillType: "",               // Optional, fill type of the alert, default: "", must be "filled-lm" || "filled-dm" || "filled"
      hasDismissButton: true,     // Optional, the alert will contain the close button if true, default: true, type: boolean
      timeShown: 5000             // Optional, time the alert stays on the screen (in ms), default: 5000, type: number
    })
  }
</script>

<div class="page-wrapper">
  <!-- This parent container is required -->
  <div class="sticky-alerts"></div>

  <!-- Content wrapper containing the toggles -->
  <div class="content-wrapper">
    ...
    <button class="btn btn-primary" type="button" onclick="toastPrimaryAlert()">Primary</button>
    <button class="btn btn-success" type="button" onclick="toastSuccessAlert()">Success</button>
    <button class="btn btn-secondary" type="button" onclick="toastSecondaryAlert()">Secondary</button>
    <button class="btn btn-danger" type="button" onclick="toastDangerAlert()">Danger</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

<!-- JavaScript -->
<script type="text/javascript">
  // Toasts primary alert
  function toastPrimaryAlert() {
    halfmoon.initStickyAlert({
      content: "This is a primary alert without a close button, that will stay up for 10 seconds.",
      title: "Primary alert",
      alertType: "alert-primary",
      hasDismissButton: false,
      timeShown: 10000
    });
  }
  
  // Toasts success alert
  function toastSuccessAlert() {
    halfmoon.initStickyAlert({
      content: "This is a success alert that will be filled only in light mode.",
      title: "Success alert",
      alertType: "alert-success",
      fillType: "filled-lm"
    });
  }
  
  // Toasts secondary alert
  function toastSecondaryAlert() {
    halfmoon.initStickyAlert({
      content: "This is a secondary alert that will be filled only in dark mode.",
      title: "Secondary alert",
      alertType: "alert-secondary",
      fillType: "filled-dm"
    });
  }
  
  // Toasts danger alert
  function toastDangerAlert() {
    halfmoon.initStickyAlert({
      content: "This is a danger alert that will be always filled.",
      title: "Danger alert",
      alertType: "alert-danger",
      fillType: "filled"
    });
  }
</script>

<div class="page-wrapper">
  <!-- Sticky alerts containing the precompiled alert -->
  <div class="sticky-alerts">
    <!-- Precompiled alert with a complex design -->
    <div class="alert alert-primary filled" role="alert" id="precompiled-alert-1">
      <table>
        <tbody>
          <tr>
            <td>
              <div class="w-50 h-50 d-flex align-items-center rounded-circle bg-white"> <!-- w-50 = width: 5rem (50px), h-50 = height: 5rem (50px), d-flex = display: flex, align-items-center = align-items: center, rounded-circle = border-radius: 50%, bg-white = background-color: white -->
                <div class="m-auto text-primary"> <!-- m-auto = margin: auto, text-primary = color: primary-color -->
                  <i class="fa fa-commenting fa-2x" aria-hidden="true"></i>
                  <span class="sr-only">Commenting</span> <!-- sr-only = only for screen readers -->
                </div>
              </div>
            </td>
            <td class="pl-20">
              <h4 class="alert-heading mb-5">New message!</h4> <!-- mb-5 = margin-bottom: 0.5rem (5px) -->
              <div>
                Jane Doe just sent you a new message.
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Content wrapper containing the toggle -->
  <div class="content-wrapper">
    ...
    <button class="btn btn-primary" type="button" onclick="halfmoon.toastAlert('precompiled-alert-1', 7500)">Toast!</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>