Modals

<div class="ui modal one">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="//via.placeholder.com/200">
    </div>
    <div class="description">
      <h2>We've auto-chosen a profile image for you.</h2>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

  $("#modal1").on('click',function(e){
    e.preventDefault();
    $('.modal.one').modal('show');
  });

<div class="ui basic modal two">
  <div class="content">
    <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
  </div>
  <div class="actions">
    <div class="ui red basic cancel inverted button">
      <i class="remove icon"></i>
      No
    </div>
    <div class="ui secondary inverted button">
      <i class="checkmark icon"></i>
      Yes
    </div>
  </div>
</div>

  <div class="ui mini modal five">
    <div class="content">
      <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
    </div>
  </div>

  <div class="ui tiny modal five">
    <div class="content">
      <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
    </div>
  </div>

  <div class="ui small modal five">
    <div class="content">
      <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
    </div>
  </div>

  <div class="ui small modal six">
    <div class="ui attached header">
      <h2>non scrolling portion of modal</h2>
    </div>
    <div class="scrolling content">
    <h2>Long modal with lots of text</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae consectetur corporis iste ad eligendi soluta nulla minima, quasi vero assumenda quae sapiente blanditiis explicabo similique, pariatur cum voluptatem recusandae repellat!</p>
    <p>Sed sequi delectus explicabo quasi repudiandae. Optio, ab, quas ut deleniti nesciunt ex at vitae quibusdam facilis. Consectetur, quae aperiam vero velit quasi porro, veniam libero, eaque, ut dicta dolorem.</p>
    <p>Delectus dolorem iure debitis rem cumque sit sapiente ratione possimus dolores, soluta, doloremque mollitia quisquam iste sunt sed, quod totam. Quo rem dolor vero dicta earum, fugiat, explicabo nisi? Eveniet.</p>
    <p>Illum aperiam qui, placeat excepturi consequuntur veniam. Molestiae vel pariatur quia culpa doloribus, eos eligendi deleniti, dolores, nobis dolore vero amet quos alias tempore maiores tempora aliquam accusantium! Quia, explicabo.</p>
    <p>At similique aut quasi doloremque quibusdam illum corrupti, soluta tempora quisquam architecto. Quas illo quaerat veritatis provident, asperiores similique quod dolorum numquam ut non, sit, nobis accusantium deserunt molestiae obcaecati.</p>
    <p>Nulla animi possimus assumenda, ipsum soluta ratione impedit aperiam. Consectetur accusamus fuga doloremque consequuntur debitis soluta corporis, tempore beatae non cumque repellat doloribus nihil repellendus mollitia fugit officia atque, id.</p>
    <p>Totam modi explicabo iusto sunt. Aspernatur, reiciendis totam libero veniam esse, sit aut harum debitis quo quis sed expedita. Assumenda voluptates, cum non, ex nam enim provident quam et magnam.</p>
    <p>Quidem, beatae. Provident maxime aliquid fuga culpa temporibus tenetur quod assumenda unde commodi inventore, mollitia sunt doloribus recusandae odio suscipit ducimus, laudantium eius asperiores quae voluptatibus nemo ea ipsum adipisci!</p>
    <p>Illo dignissimos iste a architecto nemo! Modi aperiam doloribus reiciendis minima rem tenetur atque, expedita recusandae maxime sequi mollitia debitis doloremque iure, commodi eaque. Necessitatibus, quaerat, minima. Aliquam repellendus, blanditiis.</p>
    <p>Ut minima dicta accusantium saepe assumenda nisi atque et reprehenderit, neque aspernatur tenetur natus, voluptatibus quibusdam, aliquid error. Veritatis deserunt dolorem et inventore sequi. Incidunt neque quos quibusdam doloremque iure.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae consectetur corporis iste ad eligendi soluta nulla minima, quasi vero assumenda quae sapiente blanditiis explicabo similique, pariatur cum voluptatem recusandae repellat!</p>
    <p>Sed sequi delectus explicabo quasi repudiandae. Optio, ab, quas ut deleniti nesciunt ex at vitae quibusdam facilis. Consectetur, quae aperiam vero velit quasi porro, veniam libero, eaque, ut dicta dolorem.</p>
    <p>Delectus dolorem iure debitis rem cumque sit sapiente ratione possimus dolores, soluta, doloremque mollitia quisquam iste sunt sed, quod totam. Quo rem dolor vero dicta earum, fugiat, explicabo nisi? Eveniet.</p>
    <p>Illum aperiam qui, placeat excepturi consequuntur veniam. Molestiae vel pariatur quia culpa doloribus, eos eligendi deleniti, dolores, nobis dolore vero amet quos alias tempore maiores tempora aliquam accusantium! Quia, explicabo.</p>
    <p>At similique aut quasi doloremque quibusdam illum corrupti, soluta tempora quisquam architecto. Quas illo quaerat veritatis provident, asperiores similique quod dolorum numquam ut non, sit, nobis accusantium deserunt molestiae obcaecati.</p>
    <p>Nulla animi possimus assumenda, ipsum soluta ratione impedit aperiam. Consectetur accusamus fuga doloremque consequuntur debitis soluta corporis, tempore beatae non cumque repellat doloribus nihil repellendus mollitia fugit officia atque, id.</p>
    <p>Totam modi explicabo iusto sunt. Aspernatur, reiciendis totam libero veniam esse, sit aut harum debitis quo quis sed expedita. Assumenda voluptates, cum non, ex nam enim provident quam et magnam.</p>
    <p>Quidem, beatae. Provident maxime aliquid fuga culpa temporibus tenetur quod assumenda unde commodi inventore, mollitia sunt doloribus recusandae odio suscipit ducimus, laudantium eius asperiores quae voluptatibus nemo ea ipsum adipisci!</p>
    <p>Illo dignissimos iste a architecto nemo! Modi aperiam doloribus reiciendis minima rem tenetur atque, expedita recusandae maxime sequi mollitia debitis doloremque iure, commodi eaque. Necessitatibus, quaerat, minima. Aliquam repellendus, blanditiis.</p>
    <p>Ut minima dicta accusantium saepe assumenda nisi atque et reprehenderit, neque aspernatur tenetur natus, voluptatibus quibusdam, aliquid error. Veritatis deserunt dolorem et inventore sequi. Incidunt neque quos quibusdam doloremque iure.</p>
    </div>
  </div>