<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">Fugiat aut eaque molestias.</h2>
            <p>
                Culpa aut voluptas quis aut minus magni nostrum aut. Aut possimus rerum qui soluta eum et. Labore maiores cumque explicabo reiciendis mollitia aliquid beatae. Voluptate vero repudiandae eos nulla quod commodi qui. Facilis quidem exercitationem adipisci
                nesciunt dolorum recusandae. Adipisci esse ad earum neque et deleniti. Sint laboriosam quod et quia numquam voluptates beatae non. Illum autem quas. Soluta quaerat praesentium voluptates reiciendis aut in deleniti rem. Recusandae consequuntur
                expedita incidunt magni dolor quas. Dignissimos repellendus quia quas nihil. Ex voluptatum sapiente est placeat possimus nihil eaque recusandae aperiam. Nihil aut occaecati alias autem ab consequuntur fuga sed.
            </p>
            <button class="Button Button--danger js-fr-dialogmodal-close u-floatRight">Chiudi</button>
        </div>
    </div>
</div>
  • Content:
    /** @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/modules/dialog/index.css
  • Size: 438 Bytes
  • Content:
    import Frdialogmodal from 'fr-dialogmodal/dialogmodal.js'
    
    /* eslint-disable no-unused-vars */
    
    import stylesheet from 'fr-dialogmodal/dialogmodal.css'
    
    /* eslint-enable */
    
    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/modules/dialog/index.js
  • Size: 1 KB

There are no notes for this item.