Modal

Properties:

• Title
• Content
• Actions 
   

Shoelace

https://shoelace.style/components/dialog

<sl-dialog label="Dialog" class="dialog-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-dialog>

<sl-button>Open Dialog</sl-button>

<script>
  const dialog = document.querySelector('.dialog-overview');
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector('sl-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
</script>

vue-dsfr

 
Modale - Modal

<template>
  <DsfrButton label="Ouvre la modale" @click="open()" ref="modalOrigin" />
  <DsfrModal
    ref="modal"
    :opened="opened"
    :actions="modifyActions"
    :is-alert="isAlert"
    :icon="icon"
    :title="title"
    :origin="$refs.modalOrigin"
    :size="size"
    @close="onClose()"
  >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius
      tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo.
      Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet
      augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar,
      tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec
      ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
      faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in
      ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus
      tincidunt sit amet sed orci.
    </p>
  </DsfrModal>
</template>

Vuetify

 
Dialogs

<v-dialog width="500">
   <template v-slot:activator="{ props }">
     <v-btn v-bind="props" text="Open Dialog"> </v-btn> </template>
   <template v-slot:default="{ isActive }">
      <v-card title="Dialog">
         <v-card-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </v-card-text>
         <v-card-actions> <v-spacer></v-spacer>
            <v-btn text="Close Dialog" @click="isActive.value = false" ></v-btn> </v-card-actions>
      </v-card>
   </template>
</v-dialog>