<button class="btn btn-primary"
        data-toggle="modal" data-target="#fullHeight" type="button">
  full height
</button>

<div class="modal" id="fullHeight" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog c-modal c-modal--full-height">
    <div class="c-modal__header">
      <div class="t-title--largest" id="modal-title"> c-modal__header example </div>
    </div>
    <div class="c-modal__content" role="document">
      Adipisci quibusdam voluptatem optio non quaerat quis dicta enim et sunt dolorem. sed officia maiores ullam dolor quia alias earum ipsum pariatur. expedita et ducimus rerum adipisci. excepturi dignissimos odio deserunt autem maxime inventore. maxime praesentium magni qui sint molestias deserunt iusto non praesentium. ea rem distinctio dolor quis adipisci voluptas tempore et non

Error voluptatem et sequi animi consequatur expedita quia. sint ullam ab dolor voluptatem sit quae ipsum nulla magnam adipisci. eum cupiditate esse pariatur ea in rem cupiditate est necessitatibus vel modi sit dolorem. error doloribus aut totam

Accusamus aut id quam. necessitatibus voluptatem animi eveniet aliquam eius incidunt aspernatur consequatur. totam facilis esse magnam quis deserunt voluptatem expedita voluptas nihil facilis ut. voluptatibus ut quia quia similique dolor aut nulla asperiores laboriosam rerum ut culpa eum dolores

Eos beatae perferendis a velit placeat. molestiae veritatis dolorem ea tempore atque autem quidem voluptatem corrupti ratione. atque blanditiis dolorum aut iure qui itaque sed deleniti dolores atque. nesciunt consequatur perspiciatis eaque eos non molestiae dolores quisquam delectus eos dolore ea sed dolores. doloribus qui harum animi explicabo quia aut ipsum consequatur et ipsa molestiae harum laboriosam officia

Atque dicta et rerum voluptates natus laborum. eos qui aut velit qui. exercitationem dolorum est incidunt vel illum reiciendis nihil ab omnis veniam quia corporis. repellat in suscipit officia

Eum et unde culpa quas quo ad. excepturi et dolor amet et perferendis. omnis ut et dolorem. earum dignissimos aut natus excepturi voluptate placeat et doloribus ad ad possimus ea et. debitis voluptas enim qui quidem

Voluptatem veritatis quia non numquam ex qui vel voluptatem. et voluptatem temporibus sint et voluptas dolor sint est cum ut doloribus eaque minima dolor. sint sint ratione atque modi harum. aliquid corporis a et earum excepturi quaerat qui dolores quasi ad aperiam consequatur ipsam. qui et ad asperiores quibusdam incidunt consequatur. rerum minus mollitia rerum et aut. placeat error recusandae impedit repellendus sint aliquid

Rerum quis et dicta ea est eum eos odit et ut qui. alias fuga rerum voluptates accusantium aperiam ut pariatur odit et. laboriosam voluptatem laborum id. maiores ea consequuntur qui nostrum quaerat minus consequuntur iste beatae quia. magni consectetur voluptatem quaerat rem dolorem et voluptate laborum hic quaerat eius et. numquam quasi enim cum fugiat quia omnis eligendi ut ullam at. ad architecto minima odio assumenda in suscipit officia dolores aut rerum labore omnis dolores

Voluptatem eos qui quia modi voluptatem amet distinctio esse harum eius et iusto. a ut omnis et voluptatem voluptas quas sint nulla error repellendus. vel occaecati perferendis quod sed provident

Reiciendis voluptatem minima voluptatem illo quod quos vero debitis eligendi eum provident dolores. mollitia aspernatur expedita rerum quia enim voluptas. repellat quia quibusdam facere magnam. consequuntur quasi sit modi aut. aperiam quia dolores facere laboriosam praesentium dicta ea neque. voluptatem dolorum omnis maiores sunt ipsum qui et eum qui sit nobis fugit maxime
    </div>
    <div class="c-modal__footer">
      <button class="btn btn-primary" data-dismiss="modal" type="button">
        Dismiss
      </button>
    </div>
  </div>
</div>

<p>
  <button class="btn btn-primary"
          data-toggle="modal" data-target="#largeModal" type="button">
    Large Modal
  </button>
</p>

<div class="modal" id="largeModal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog modal-lg c-modal c-modal--full-height">
    <div class="c-modal__header c-modal__border">
      <div class="t-title--largest" id="modal-title"> Large Modal </div>
    </div>

    <div class="c-modal__content" role="document">
      Ut quod vero voluptatem corrupti modi earum sed natus adipisci. dolorum distinctio eveniet non voluptates aut consequatur tempora est porro qui occaecati. eaque nulla illo sunt quis dolorum. voluptatum non ipsa totam omnis sint totam explicabo voluptatibus voluptatem esse. delectus quam ut earum molestiae labore quibusdam asperiores iusto. similique libero et fugit modi mollitia dolorem id consequatur aperiam quia temporibus aut. sit nesciunt hic minus

Et natus odio laborum ratione nostrum odit odit quam commodi. dolorem nisi et est deserunt consequuntur assumenda enim sint. alias atque quia doloribus est laborum dolore voluptas ullam. qui qui odio dicta ex vero dolores libero delectus. quidem nihil maxime ea tempore optio fugiat est sed cum enim earum. sint quae nostrum laudantium aperiam voluptas dolorem eum temporibus deserunt

Quis velit illum iste facere natus expedita nam eum. illum aut iure expedita cumque. aut est aliquam quasi ad et eaque aspernatur nostrum. autem delectus sint laudantium omnis exercitationem asperiores et sint est ea officiis ullam. omnis enim id reiciendis rerum voluptates saepe quo nobis possimus facilis voluptatem. officia vel odit suscipit dolor animi

Suscipit non sed ut accusantium. nihil perferendis rerum labore aliquam. soluta distinctio tenetur illum dolores soluta et

Ipsam et sunt dolore beatae quo quo ut id qui enim dolorem. expedita enim ut reprehenderit laborum quod quo ea delectus eligendi. soluta maiores et fuga quia accusamus voluptas quia quia. delectus quam incidunt qui corrupti amet sit molestiae sit qui in totam expedita reiciendis

Et sit voluptate asperiores magni quasi molestiae iste voluptas repellat necessitatibus sunt in aut sed. quas voluptatum harum quod ex. vel omnis tenetur libero veniam eaque dignissimos. ex ex dolores qui placeat eius error et qui et dolor cumque. qui voluptatum et est dolorum voluptatem. ipsa at et quas

Ea incidunt blanditiis harum et sed et dicta ut animi. corporis eum quis laborum ea qui rerum libero qui sunt blanditiis dolorum voluptas error aut. est qui praesentium voluptate reprehenderit harum autem doloremque quos qui odio earum

Esse libero iure fugiat hic voluptatem amet exercitationem nam. id id omnis expedita asperiores facere est numquam. consequuntur ipsam itaque quo. voluptas quaerat repellat perferendis assumenda ipsam nostrum cupiditate. est qui optio cupiditate ducimus quia officia ipsa

Maxime ipsa molestiae voluptas ad. ipsum et et ipsum modi magnam molestias voluptas excepturi aperiam. cupiditate dolorum quis mollitia omnis adipisci a consequatur alias velit rerum eos necessitatibus pariatur nemo. molestiae eum quidem quam rem sit id enim harum numquam porro consequuntur aspernatur repellat

Qui quasi rerum velit qui repellat voluptatem. voluptatum iusto praesentium delectus iusto et a excepturi quae commodi asperiores doloribus commodi earum. sunt voluptatum maxime quia sequi est culpa beatae accusantium inventore est excepturi. minus nostrum suscipit non eum non veritatis. eos iure non voluptatem non ea molestiae blanditiis atque dolorem magni doloremque dolor doloribus. rem eligendi voluptatem autem quia exercitationem delectus delectus at. est dolores dolore voluptatem mollitia dolorem voluptatem autem
    </div>

    <div class="c-modal__footer">
      <button class="btn btn-primary" data-dismiss="modal" type="button">
        Dismiss
      </button>
    </div>
  </div>
</div>

<p>
  <button class="btn btn-primary"
          data-toggle="modal" data-target="#defaultModal" type="button">
    Default Modal
  </button>
</p>

<div class="modal" id="defaultModal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog c-modal">
    <div class="c-modal__header">
      <div class="t-title--largest" id="modal-title"> Default Modal </div>
    </div>

    <div class="c-modal__content" role="document">
      Cum eum est ratione omnis et dolores ea numquam voluptatem ut. aut beatae et placeat odio facilis ut laboriosam deserunt rerum. expedita dicta nesciunt dignissimos impedit molestiae quia. quo omnis molestiae est voluptate. ut quia dolorem sint nam fuga vel eligendi alias molestias. aut ut beatae dolorem maiores ducimus expedita ut repellendus reprehenderit ratione labore est ut velit

Quo id sunt minus neque amet labore aliquam dolor minus consequatur qui sit unde id. voluptatum nostrum suscipit repudiandae et a nisi. commodi minima tempore expedita ratione. ut adipisci minima sed fugit aut voluptas corporis error voluptas provident impedit. dolorum doloremque nostrum eius reprehenderit voluptatum quaerat molestiae exercitationem ipsum nam et voluptate et. ab repudiandae ad consectetur ut commodi dolorem tempora debitis quia ducimus eaque repellat quaerat enim

Modi repellendus excepturi ut ipsam sed modi. blanditiis dicta ea dignissimos laboriosam hic iste rerum in cumque ratione modi distinctio aut. magni reprehenderit est deleniti porro. inventore neque corporis magni repellat temporibus maiores aliquam quis

Ut sed ut totam ut. natus eligendi perspiciatis et asperiores. cupiditate totam consequatur autem cupiditate qui quia tempora corporis sunt. delectus dolores at quos. quo quas perspiciatis tempora qui tempora. officiis assumenda rem voluptatibus officiis temporibus maiores in

Illo quas rerum libero cupiditate voluptatem ex et et quod numquam esse numquam. voluptas ut beatae rerum soluta excepturi odio provident est est minima. quod omnis perspiciatis ab

Rerum sint qui laboriosam praesentium tenetur eius rerum voluptates vel. ab aut occaecati consequatur necessitatibus et mollitia impedit ab. voluptas et deserunt pariatur quisquam vero illum est perferendis mollitia dicta. amet eos quia est temporibus repudiandae commodi quae sunt voluptatem temporibus

Aut harum exercitationem accusantium enim aliquam. tempora facilis illum laboriosam vero tenetur sed repudiandae autem nesciunt molestiae. pariatur ducimus autem unde repudiandae non qui et aut placeat at rem in fugit. officia ratione est veniam quo iure placeat consequuntur voluptatem excepturi eius excepturi accusantium sit quis. exercitationem nihil at officiis cum

Officiis mollitia maiores voluptatibus id recusandae itaque quibusdam. facere minus cumque accusamus. nam sapiente similique nam vero animi sit

Excepturi consequuntur tempora ut labore. rerum animi ut iste aut sed et velit aut. dolore quos debitis qui et vero et. et architecto sint voluptatem doloremque sit omnis asperiores et vel reprehenderit vero. sit aperiam dolore ad id non. et adipisci consequuntur fuga

Beatae repellat iure ad. cum et deleniti rem porro deserunt eligendi. ut consequatur et qui perferendis nesciunt repellendus officiis dolores dolorem
    </div>

    <div class="c-modal__footer">
      <button class="btn btn-primary" data-dismiss="modal" type="button">
        Dismiss
      </button>
    </div>
  </div>
</div>

<p>
  <button class="btn btn-primary"
          data-toggle="modal" data-target="#smallModal" type="button">
    Small Modal
  </button>
</p>

<div class="modal" id="smallModal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog modal-sm c-modal">
    <div class="c-modal__header">
      <div class="t-title--large" id="modal-title"> Small Modal </div>
    </div>

    <div class="c-modal__content" role="document">
      Et illum odio quia ut inventore et rerum. nisi est sint exercitationem temporibus dolorem recusandae corrupti est in sunt quibusdam ut. ut nisi cupiditate incidunt voluptatem sit assumenda est rerum dicta aut doloremque dolor
    </div>

    <div class="c-modal__footer">
      <button class="btn btn-tertiary" data-dismiss="modal" type="button">
        Cancel
      </button>
      <button class="btn btn-primary" data-dismiss="modal" type="button">
        Yes, I'm Sure
      </button>
    </div>
  </div>
</div>

  <p>
    <button class="btn btn-primary"
            data-toggle="modal" data-target="#a11yModal" type="button">
      A11y Modal
    </button>
  </p>

  <div class="modal" id="a11yModal" role="dialog" aria-labelledby="modal-title">
    <div class="modal-dialog modal-sm c-modal">
      <div class="c-modal__header">
        <div class="t-title--large" id="modal-title"> A11y Modal </div>
      </div>

      <div class="c-modal__content" role="document">
        Iure perferendis officia maxime. aspernatur deleniti in qui quaerat dolorum non neque quia aliquid dolorem dignissimos cumque reprehenderit. veritatis expedita et vel eum. delectus illum cumque odit dolorem dolore esse repellat aspernatur dolor accusantium labore esse molestias qui. consequuntur fugiat et odit repellendus iure. ab qui dolor labore suscipit
      </div>

      <div class="c-modal__footer">
        <button class="btn btn-tertiary" data-dismiss="modal" type="button">
          Cancel
        </button>
        <button class="btn btn-primary" data-dismiss="modal" type="button">
          Yes, I'm Sure
        </button>
      </div>
    </div>
  </div>

<p>
  <button class="btn btn-primary" data-toggle="modal" data-target="#defaultGrayModal" type="button">
    Default modal with gray background
  </button>
</p>

<div class="modal" id="defaultGrayModal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog c-modal c-modal-gray">
    <div class="c-modal__header">
      <div class="t-title--largest" id="modal-title">Default Gray Modal</div>
    </div>

    <div class="c-modal__content" role="document">Nisi vero exercitationem sint hic dicta architecto qui omnis voluptatem sed. similique aut est cumque debitis qui necessitatibus tenetur. et molestiae ea eum accusantium expedita voluptatem at eaque. quisquam aperiam in est aliquam quis consequatur unde sequi eos quae quos. et autem corrupti quis sit. rerum vero voluptatem accusamus sunt natus repellendus blanditiis corrupti ab id dolor inventore ea ab</div>

    <div class="c-modal__footer">
      <button class="btn btn-primary" data-dismiss="modal" type="button">Dismiss</button>
    </div>
  </div>
</div>

<p>
  <button class="btn btn-primary" data-toggle="modal" data-target="#smallGrayModal" type="button">
    Small modal with gray background
  </button>
</p>

<div class="modal" id="smallGrayModal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog modal-sm c-modal c-modal-gray">
    <div class="c-modal__header">
      <div class="t-title--large" id="modal-title">Small Gray Modal</div>
    </div>

    <div class="c-modal__content" role="document">Qui qui dolor quia vitae et repellat culpa. quia possimus tempore impedit amet magnam. blanditiis illo repellat blanditiis eaque accusamus. itaque magni aut natus animi vel magni voluptate velit cumque sunt consequuntur. impedit ea deleniti dolorem in</div>

    <div class="c-modal__footer">
      <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
    </div>
  </div>
</div>

<p>
WARNING:<br>
This dialog should not be used for new features.<br>
It should only be used for jQuery UI dialogs in legacy Flagship views.
</p>

<p>
  <button class="btn btn-primary" id="jquery-dialog" type="button">
    jQueryUI Dialog
  </button>
</p>

<div id="confirm" title="Are you sure?">
  <p>Are you sure you want to cancel this action?</p>
</div>

<script>
jQuery(function ($) {
  $('#confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    width: 400,
    buttons: [{
      class: 'btn btn-secondary',
      text: 'Cancel',
      click: function () {
        $('#confirm').dialog('close');
      }
    },{
      class: 'btn btn-primary',
      text: 'Keep Changes',
      click: function () {
        $('#confirm').dialog('close');
      }
    }]
  });

  $('#jquery-dialog').on('click', function () {
    $('#confirm').dialog('open');
  });
});
</script>