<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">Quis excepturi fuga assumenda animi officiis eum delectus illo.</h2>
            <p>
                Amet odit quo autem. Architecto id non deserunt ut error excepturi consequuntur reiciendis commodi. Sint necessitatibus et adipisci qui qui at aliquid. Ex voluptatem recusandae repellat. Qui perferendis eos ut praesentium ipsum. Doloribus voluptas ut
                non odit soluta voluptatem nam voluptas. Omnis autem sint commodi occaecati. Iure distinctio ullam consequuntur accusamus beatae est et quia. Laboriosam dolores natus sint a culpa nihil et. Fugiat aut molestiae perspiciatis magni eum voluptatum
                corporis. Eos quia laudantium maxime similique numquam dolorem velit aut accusamus. Eaque ut esse dicta. Id eius tenetur debitis velit illum voluptatibus vel sit. Nihil at qui ab eaque corrupti officiis facilis.
            </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.