<button class="Button Button--default js-fr-dialogmodal-open" aria-controls="modal">
  Apri
</button>

<div class="Dialog js-fr-dialogmodal" id="modal">
    <div class="
      Dialog-content
      Dialog-content--centered
      u-background-white
      u-layout-prose
      u-margin-all-xl
      u-padding-all-xl
      js-fr-dialogmodal-modal
    " aria-labelledby="modal-title">
        <div role="document" class="Prose">
            <h2 class="u-cf u-text-h2 u-borderHideFocus" id="modal-title" tabindex="0">Consequatur eligendi sit similique est est voluptatem labore consequatur sit.</h2>
            <p>
                Magnam aut deserunt sed commodi. Et delectus praesentium consectetur quasi incidunt. Similique enim quibusdam aut consequatur quia. In reprehenderit harum et sequi et dolor amet rerum. Autem ad aliquam id ipsum rerum. Corporis omnis aliquam nihil deserunt.
                Autem voluptatem consectetur magnam quo aperiam autem dolores doloremque nihil. Assumenda non sunt quis deserunt molestiae incidunt quia quasi. Soluta minima dolorem eum cupiditate. Officiis perferendis enim voluptatem ea harum vel non.
                Sapiente rerum vero doloremque omnis. Tempora culpa nostrum rem quas aut quas maxime ullam. Et nobis animi optio et ea dolor ipsam hic.
            </p>
            <button class="Button Button--danger js-fr-dialogmodal-close u-floatRight">Chiudi</button>
        </div>
    </div>
</div>
  • Content:
    @import "fr-dialogmodal/dialogmodal.css";
    
    /** @define Dialog; */
    
    /* postcss-bem-linter: ignore */
    
    .Dialog.fr-dialogmodal--is-ready[aria-hidden=false] {
      background-color: rgba(34, 34, 34, 0.8);
      box-shadow: 0 3.75em 0 0 rgba(34, 34, 34, 0.8);
      transition: background-color 0.15s ease-out;
    }
    
    .Dialog-content {
      max-height: 90%;
      overflow: auto;
    }
    
    .Dialog-content--centered {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translateX(-50%) translateY(-60%);
    }
    
  • URL: /components/raw/dialog/index.css
  • Filesystem Path: src/components/dialog/index.css
  • Size: 481 Bytes
  • Content:
    import Frdialogmodal from 'fr-dialogmodal/dialogmodal.js'
    
    var dialog = Frdialogmodal({
      // String - Outer container selector, hook for JS init() method
      selector: '.js-fr-dialogmodal',
    
      // String - Modal selector, the element that represents the modal
      modalSelector: '.js-fr-dialogmodal-modal',
    
      // String - Selector for the open button
      openSelector: '.js-fr-dialogmodal-open',
    
      // String - Selector for the close button
      closeSelector: '.js-fr-dialogmodal-close',
    
      // Boolean - Switches the dialog role to alertdialog, only use this when representing an alert, error or warning
      isAlert: false,
    
      // String - Class name that will be added to the selector when the component has been initialised
      readyClass: 'fr-dialogmodal--is-ready',
    
      // String - Class name that will be added to the selector when the component is active
      activeClass: 'fr-dialogmodal--is-active'
    })
    
    export default { dialog, Frdialogmodal }
    
  • URL: /components/raw/dialog/index.js
  • Filesystem Path: src/components/dialog/index.js
  • Size: 934 Bytes

There are no notes for this item.