altinn-designsystem/dist/patterns/03-maler-portal-99-modal-js-01-modal-js/03-maler-portal-99-modal-js-01-modal-js.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 03-maler-portal-99-modal-js-01-modal-js JS doc: AltinnModal.js -->
<button class="a-btn" data-toggle="altinn-modal" data-action="load" data-url="https://altinn.github.io/DesignSystem/public/patterns/03-maler-portal-99-modal-js-02-page-one/03-maler-portal-99-modal-js-02-page-one.markup-only.html" data-target="#modal">Åpne modal</button>

<div class="a-modal fade modal" id="modal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="container a-p-static">
      <div class="row">
        <div class="col-xl-12">
          <!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
          <div class="a-modal-top">
            <!-- START: 00-atomer-09-bilder-og-media-01-logo -->

            <img src="..&#x2F;..&#x2F;images&#x2F;a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">

            <!-- END: 00-atomer-09-bilder-og-media-01-logo -->

            <div class="a-modal-top-user">
              <!-- START: 00-atomer-07-tekst-40-innlogget -->
              <div class="a-personSwitcher " title="Kari Nordmann ">
                <span class="a-personSwitcher-name">
    <span class="d-block">Kari Nordmann</span>
                <span class="d-block"></span>
                </span>
                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="ai ai-private-circle-big  a-personSwitcher-icon "></i>


                <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->


              </div>

              <!-- END: 00-atomer-07-tekst-40-innlogget -->

            </div>
          </div>

          <!-- END: 01-molekyler-20-modalelementer-05-modal-header -->

        </div>
      </div>
      <div class="row">
        <div class="col-xl-10 offset-xl-1 a-p-static">
          <!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
          <div class="a-modal-navbar">
            <!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
            <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="backPopoverContent" data-popover-class="popover-warning" data-trigger="manual">
  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack">
    <i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-back   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->


</button>

            <div>
            </div>
            <div role="popover" id="backPopoverContent" class="d-none">
              <div class="pb-1">Du har gjort endringer som ikke vil lagres</div>
              <!-- START: 00-atomer-03-knapper-10-knapp -->
              <button type="button" class="a-btn a-btn-danger a-js-modal-dirtyBackBtn mr-1">
  
    Ok
  
</button>

              <!-- END: 00-atomer-03-knapper-10-knapp -->

              <!-- START: 00-atomer-03-knapper-10-knapp -->
              <button type="button" class="a-btn-link a-linkDanger a-js-modal-dirtyCancelBtn mr-1">
  <span>
    Avbryt
  </span>
</button>

              <!-- END: 00-atomer-03-knapper-10-knapp -->

            </div>

            <!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->

            <!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
            <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="closePopoverContent" data-popover-class="popover-warning" data-trigger="manual">
  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack">
    <i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-exit  a-modal-close-icon "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->


</button>

            <div>
            </div>
            <div role="popover" id="closePopoverContent" class="d-none">
              <div class="pb-1">Du har gjort endringer som ikke vil lagres</div>
              <!-- START: 00-atomer-03-knapper-10-knapp -->
              <button type="button" class="a-btn a-btn-danger a-js-modal-dirtyCloseBtn mr-1">
  
    Ok
  
</button>

              <!-- END: 00-atomer-03-knapper-10-knapp -->

              <!-- START: 00-atomer-03-knapper-10-knapp -->
              <button type="button" class="a-btn-link a-linkDanger a-js-modal-dirtyCancelBtn mr-1">
  <span>
    Avbryt
  </span>
</button>

              <!-- END: 00-atomer-03-knapper-10-knapp -->

            </div>

            <!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->

          </div>

          <!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->

          <div class="a-modal-content-target">
            <!-- The content will be injected here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- END: 03-maler-portal-99-modal-js-01-modal-js -->