JavaScript

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#js-modale-virement">Confirmer le virement</button>

<div class="modal fade" id="js-modale-virement" tabindex="-1" aria-labelledby="js-modale-virement-titre" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="js-modale-virement-titre">Virement de 150 000 FCFA</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">Du compte courant vers le compte épargne.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Confirmer</button>
      </div>
    </div>
  </div>
</div>

const modale = new bootstrap.Modal('#js-modale-virement');
modale.show();   // ouvre
modale.hide();   // ferme
modale.toggle(); // bascule

// Récupérer l'instance d'un élément, ou la créer si elle n'existe pas
const menu = bootstrap.Dropdown.getOrCreateInstance(document.querySelector('#menu-compte'));

// Récupérer l'instance existante (null s'il n'y en a pas)
const existante = bootstrap.Modal.getInstance('#js-modale-virement');

// Libérer un composant que vous n'utilisez plus
modale.dispose();

import bootstrap from '@bdu/cauri/js';

const modale = new bootstrap.Modal('#js-modale-virement');
modale.show();

// Pour les seuls attributs data-bs-*, un import sans valeur suffit
// import '@bdu/cauri/js';

// Infobulles
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach((el) => new bootstrap.Tooltip(el));

// Popovers
document.querySelectorAll('[data-bs-toggle="popover"]')
  .forEach((el) => new bootstrap.Popover(el));

// Contenu ajouté plus tard : déléguer à un conteneur
new bootstrap.Tooltip(document.body, { selector: '[data-bs-toggle="tooltip"]' });

<button type="button" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-title="Le plafond est de 500 000 FCFA par jour">Plafond de virement</button>

<!-- Par attribut -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
        data-bs-target="#js-modale-virement" data-bs-backdrop="static" data-bs-keyboard="false">
  Confirmer le virement
</button>

<script>
  // Par objet
  new bootstrap.Modal('#js-modale-virement', { backdrop: 'static', keyboard: false });
  new bootstrap.Tooltip('#plafond', { placement: 'bottom', trigger: 'focus' });
  new bootstrap.Toast('#toast-recu', { delay: 8000 });
</script>

const modale = document.querySelector('#js-modale-virement');

modale.addEventListener('shown.bs.modal', () => {
  document.querySelector('#montant').focus();
});

// Empêcher la fermeture tant que le formulaire est incomplet
modale.addEventListener('hide.bs.modal', (e) => {
  if (!document.querySelector('#formulaire-virement').checkValidity()) {
    e.preventDefault();
  }
});

// Carrousel : savoir quelle diapositive s'affiche
document.querySelector('#offres').addEventListener('slid.bs.carousel', (e) => {
  console.log('Diapositive', e.to);
});

new bootstrap.Tooltip('#plafond', { animation: false });
new bootstrap.Toast('#toast-recu', { animation: false });

// Modale sans fondu : pas de classe "fade"
// <div class="modal" id="js-modale-virement" tabindex="-1">…</div>

<form data-cauri-simulator data-rate="7.5">
  <label class="form-label" for="sim-montant">Montant (FCFA)</label>
  <input class="form-control" id="sim-montant" name="amount" type="number" value="1000000" min="0">
  <label class="form-label mt-3" for="sim-duree">Durée (mois)</label>
  <input class="form-control" id="sim-duree" name="months" type="number" value="24" min="1">
  <p class="mt-3 mb-0" aria-live="polite">Mensualité : <strong data-cauri-result></strong></p>
</form>

<script src="https://cdn-cauri.wanetech.com/v0.1.0/cauri.js"></script>
<script>
  // Mensualité de 1 000 000 FCFA à 7,5 % sur 24 mois
  console.log(Cauri.monthlyPayment(1000000, 7.5, 24)); // environ 44 999,6
</script>