<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">A architecto qui et veritatis.</h2>
            <p>
                Illo voluptates debitis omnis necessitatibus quaerat. Pariatur architecto cumque. Delectus eius fuga. Sequi voluptatibus voluptatum nisi rem aut. Amet perferendis est vitae est facere consequatur officiis praesentium. Id quas ut reprehenderit provident
                porro qui odio delectus. Et odit atque doloribus alias aut facere pariatur. In corporis aspernatur aliquam et quibusdam id natus. Voluptatem eius aut vel vel aliquam sit. Voluptatem autem labore aut debitis rem quae delectus maxime consequuntur.
                Voluptate et labore ratione.
            </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.