<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">Velit voluptatem expedita molestiae veritatis consectetur tempora.</h2>
            <p>
                Qui fugit quis dolores. Aperiam repudiandae omnis. Consequatur quo reiciendis est. Quo reprehenderit iste eos autem laborum velit provident. Atque aut saepe fuga nihil corporis ducimus. Reiciendis est ea. Amet neque libero et eveniet ducimus et. Consequatur
                laudantium cumque in aut nisi nihil dolores sapiente explicabo. Delectus inventore rerum ex assumenda impedit voluptas porro repellat. Ut aut rerum odit cupiditate eos nisi deleniti corrupti. Voluptatem aliquam non quisquam id dolorem
                quo quo. Et corrupti quis autem laudantium vel.
            </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.