Skip to content

NimTechnology

Trình bày các công nghệ CLOUD một cách dễ hiểu.

  • Kubernetes & Container
    • Docker
    • Kubernetes
      • Ingress
    • Helm Chart
    • Isito-EnvoyFilter
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Vault
    • Longhorn – Storage
    • VictoriaMetrics
    • MetalLB
    • Kong Gateway
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Spinnaker
    • Jenkins
    • Harbor
    • TeamCity
    • Git
      • Bitbucket
  • Coding
    • Terraform
      • GCP – Google Cloud
      • AWS – Amazon Web Service
    • Golang
    • Laravel
    • Python
    • Jquery & JavaScript
    • Selenium
  • Log & Monitor
    • DataDog
    • Prometheus
    • Grafana
    • ELK
      • Kibana
      • Logstash
  • BareMetal
    • NextCloud
  • Toggle search form

[Bootstrap] Using toasts stead of alerts in Javascript

Posted on May 5, 2022 By nim No Comments on [Bootstrap] Using toasts stead of alerts in Javascript

Mình cũng gà code frontend.
Chú yêu mình sẽ sử dụng javascript và boostrap là chỉnh

Để thông báo cho user, thì mình hay dùng alert trong javascipt.

Gần đây mình gặp 1 vấn đề:

  • nhìn alert thì nó hơi cảm giác ức chế:
  • Nó không security

https://getbootstrap.com/docs/4.5/components/toasts/

Mình đã thay thấy bằng Toasts.

chúng ta sẽ có 1 popup như thế này

phần html:

<div class="row">
  <div class="col-md-4">
    <h1 class="py-3">Workloads</h1>
  </div>
  <div class="ml-auto">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000">
      <div class="toast-header">
        <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <strong class="mr-auto">Notification</strong>
        {{-- <small>11 mins ago</small> --}}
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Kratos will only show your owned workloads, when you have logined!
      </div>
    </div>
  </div>
</div>

Tiếp đến là bạn cần javascript để goi popup lên

<script type="text/javascript">
    $(document).ready(function() {
      $(".toast").toast("show");
    });
</script>
Jquery & JavaScript

Post navigation

Previous Post: [Terraform] – Terraform Beginner – Lesson 7: Terraform Modules
Next Post: [nodeJs] Resovle the issue: npm ERR! cb() never called!

More Related Articles

[Javascript] Changing the js version after you change their content. Jquery & JavaScript
[Popup/Ajax] Tạo popup(modal/bootstrap) insert data bằng ajax và php Coding
[Javascipt] Get class or id of select – option with JQuery Jquery & JavaScript
[Ajax/PHP] Cách để PHP trả Json Data về cho Ajax Coding
[JS] Lấy value hoặc text của option đã được chọn trong thẻ select bằng jquery hay javascript Coding
[Js] Sử dụng Jquery để liên kết 2 select trong page. Coding

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tham Gia Group DevOps nhé!
Để Nim có nhiều động lực ra nhiều bài viết.
Để nhận được những thông báo mới nhất.

Recent Posts

  • [Prometheus/Grafana] Install Prometheus and Grafana on ubuntu. March 27, 2023
  • [Kong Gateway] WebSocket connection failed March 26, 2023
  • [Nextcloud] Can’t download files to have a size bigger than 2Gi on NextCloud – RaspBerry March 24, 2023
  • [Datadog] Using DataDog to monitor all services on kubernetes March 19, 2023
  • [Metrics Server] Failed to make webhook authorizer request: the server could not find the requested resource March 17, 2023

Archives

  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Categories

  • BareMetal
    • NextCloud
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Git
      • Bitbucket
    • Harbor
    • Jenkins
    • Spinnaker
    • TeamCity
  • Coding
    • Golang
    • Jquery & JavaScript
    • Laravel
    • Python
    • Selenium
    • Terraform
      • AWS – Amazon Web Service
      • GCP – Google Cloud
  • Kubernetes & Container
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Docker
    • Helm Chart
    • Isito-EnvoyFilter
    • Kong Gateway
    • Kubernetes
      • Ingress
    • Longhorn – Storage
    • MetalLB
    • Vault
    • VictoriaMetrics
  • Log & Monitor
    • DataDog
    • ELK
      • Kibana
      • Logstash
    • Grafana
    • Prometheus
  • Uncategorized
  • Admin

Copyright © 2023 NimTechnology.