Mobile App Modal

By Rafi

interaction reveal modal popup alert flexbox

How do I use This?

A mobile app modal that is inspired by IOS modals.

HTML

<div class="button-group align-center">
  <button href="#" class="button" data-open="mobile-ios-modal"><i class="fa fa-cogs"></i> Quantity</button>
  <button href="#" class="button" data-open="mobile-ios-modal-2"><i class="fa fa-warning"></i> Alert</button>
  <button href="#" class="button" data-open="mobile-ios-modal-3"><i class="fa fa-cogs"></i> Security</button>
  <button href="#" class="button" data-open="mobile-ios-modal-4"><i class="fa fa-cogs"></i> Settings</button>
</div>

<div class="reveal mobile-ios-modal" id="mobile-ios-modal" data-reveal>
  <div class="mobile-ios-modal-inner">
    <p>Number of Yetis</p>
    <input type="number">
  </div>

  <div class="mobile-ios-modal-options">
    <button data-close class="button">Cancel</button>
    <button class="button">Ok</button>
  </div>
</div>

<div class="reveal mobile-ios-modal" id="mobile-ios-modal-2" data-reveal>
  <div class="mobile-ios-modal-inner">
    <p>Your password does not match our records. Please re-enter your password.</p>
  </div>

  <div class="mobile-ios-modal-options">
    <button data-close class="button">Cancel</button>
    <button class="button">Ok</button>
  </div>
</div>

<div class="reveal mobile-ios-modal" id="mobile-ios-modal-3" data-reveal>
  <div class="mobile-ios-modal-inner">
    <p>Plase enter your 4-digit passcode</p>
    <input type="text">
  </div>

  <div class="mobile-ios-modal-options">
    <button data-close class="button">Cancel</button>
    <button class="button">Ok</button>
  </div>
</div>

<div class="reveal mobile-ios-modal" id="mobile-ios-modal-4" data-reveal>

  <div class="mobile-ios-modal-options-stacked">
    <button class="button">Search for Image</button>
    <button class="button">Choose Photo</button>
    <button class="button">Take Photo</button>
    <button data-close class="button">Cancel</button>
  </div>
</div>

$mobile-ios-modal-width: 226px;
$mobile-ios-modal-radius: rem-calc(12);

.mobile-ios-modal {
  width: $mobile-ios-modal-width;
  min-height: 160px;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: $mobile-ios-modal-radius;
  @include horizontal-center;
}

.mobile-ios-modal-inner {
  padding: 0.5rem 0.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
}

.mobile-ios-modal-options {
  display: flex;

  .button {
    flex: 1 0 0;
    margin-bottom: 0;
    color: $primary-color;
    background: transparent;
    border-color: $light-gray;
    border-bottom: 0;
  }
}

.mobile-ios-modal-options-stacked {

  .button {
    display: block;
    width: 100%;
    flex: 1 0 0;
    margin-bottom: 0;
    color: $primary-color;
    background: transparent;
    border-color: $light-gray;
    border-bottom: 0;
  }
}

.mobile-ios-modal {
  width: 226px;
  min-height: 160px;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0.75rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.mobile-ios-modal-inner {
  padding: 0.5rem 0.5rem 1.5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mobile-ios-modal-options {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.mobile-ios-modal-options .button {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  margin-bottom: 0;
  color: #1779ba;
  background: transparent;
  border-color: #e6e6e6;
  border-bottom: 0;
}

.mobile-ios-modal-options-stacked .button {
  display: block;
  width: 100%;
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  margin-bottom: 0;
  color: #1779ba;
  background: transparent;
  border-color: #e6e6e6;
  border-bottom: 0;
}

Mobile App Modal

By Rafi

Alert Callouts Subtle

Status Update with Input Box

Blog Tag Cloud

Mobile App Modal

By Rafi

Similar Building Blocks

Alert Callouts Subtle

Status Update with Input Box

Blog Tag Cloud