Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Modal toàn màn hình

Dùng cho việc quá lớn để nhét vào một thẻ — nó che kín ứng dụng để người dùng làm xong đúng việc đó.

Lớp phủ

Xem trước trực tiếp

Nguồn

<div class="dc-fs" role="dialog" aria-modal="true" aria-labelledby="dc-fs-t">
  <div class="dc-fs__bar">
    <button class="dc-fs__bar-ico" type="button">
      <span class="dc-sr">쓰던 내용 버리고 닫기</span>
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
    </button>
    <h2 class="dc-fs__bar-title" id="dc-fs-t">후기 쓰기</h2>
    <button class="dc-fs__bar-act" type="button">등록</button>
  </div>
  <div class="dc-fs__body">
    <div class="dc-fs__field">
      <label class="dc-fs__label" for="dc-fs-ttl">한 줄 요약</label>
      <input class="dc-fs__input" id="dc-fs-ttl" type="text" value="배송이 하루 빨랐어요">
    </div>
    <div class="dc-fs__field">
      <label class="dc-fs__label" for="dc-fs-txt">자세한 이야기</label>
      <textarea class="dc-fs__textarea" id="dc-fs-txt" rows="6" aria-describedby="dc-fs-txt-help">포장이 단단해서 모서리 하나 안 눌렸습니다. 색은 화면보다 조금 어둡게 나왔고, 크기는 적어 둔 대로 맞았습니다.</textarea>
      <p class="dc-fs__help" id="dc-fs-txt-help">10자 이상 쓰면 등록할 수 있습니다.</p>
    </div>
  </div>
</div>
.dc-fs {
  display: flex; flex-direction: column;
  height: 560px; overflow: hidden;
  background: var(--dc-bg);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-fs__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--dc-1);
  padding: calc(var(--dc-safe-top) + var(--dc-1)) var(--dc-2) var(--dc-1);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
}
.dc-fs__bar-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: transparent; color: var(--dc-text);
}
.dc-fs__bar-ico svg { width: 22px; height: 22px; }
.dc-fs__bar-ico:active { background: var(--dc-sunken); }
.dc-fs__bar-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 16px; font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--dc-text);
}
.dc-fs__bar-act {
  flex: 0 0 auto;
  min-width: 56px; min-height: 44px; padding: 0 var(--dc-3);
  border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-brand-text);
  font-family: inherit; font-size: 15px; font-weight: 700;
}
.dc-fs__bar-act:active { background: var(--dc-brand-soft); }
.dc-fs__step {
  flex: 0 0 auto; min-width: 44px; padding: 0 var(--dc-2);
  font-size: 13px; font-weight: 700; text-align: right;
  color: var(--dc-text-mute);
}
.dc-fs__prog { height: 3px; background: var(--dc-sunken); }
.dc-fs__prog-fill { display: block; width: 66%; height: 100%; background: var(--dc-brand); }
.dc-fs__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dc-5); }
.dc-fs__field { margin-bottom: var(--dc-5); }
.dc-fs__label { display: block; margin-bottom: var(--dc-2); font-size: 13px; font-weight: 700; color: var(--dc-text); }
.dc-fs__input,
.dc-fs__textarea {
  display: block; width: 100%;
  padding: var(--dc-3) var(--dc-4);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 15px; line-height: 1.6;
}
.dc-fs__input { min-height: 48px; }
.dc-fs__textarea { resize: vertical; }
.dc-fs__input:focus, .dc-fs__textarea:focus { border-color: var(--dc-brand); outline: 2px solid var(--dc-brand-soft); outline-offset: 0; }
.dc-fs__help { margin: var(--dc-2) 0 0; font-size: 12px; line-height: 1.6; color: var(--dc-text-mute); }
.dc-fs__h3 { margin: var(--dc-5) 0 var(--dc-2); font-size: 14px; font-weight: 700; color: var(--dc-text); }
.dc-fs__h3:first-child { margin-top: 0; }
.dc-fs__p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--dc-text-sub); }
.dc-fs__foot {
  padding: var(--dc-3) var(--dc-5) calc(var(--dc-4) + var(--dc-safe-bottom));
  border-top: 1px solid var(--dc-line);
  background: var(--dc-surface);
}
.dc-fs__cta {
  width: 100%; min-height: 50px;
  border: 0; border-radius: var(--dc-r-md);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-family: inherit; font-size: 15px; font-weight: 700;
}
.dc-fs__cta:active { background: var(--dc-brand-hi); }

Cách dùng

  • Góc trên bên trái để đóng (hoặc quay lại); bên phải chỉ một hành động kết thúc
  • Tiêu đề nói rõ việc đang làm: 'Viết đánh giá', không phải 'Bài mới'
  • Nếu có nhiều bước, luôn cho thấy đang ở bước nào và còn mấy bước
  • Khi đã nhập dở mà chạm đóng, phải hỏi có bỏ không

Điểm cần lưu ý

  • Đặt --dc-safe-top cho thanh trên và --dc-safe-bottom cho chân cố định
  • Nút đóng chỉ có biểu tượng — ghi rõ nó đóng cái gì trong span dc-sr
  • Bàn phím sẽ che chân cố định; chỉ để phần thân cuộn

Tiếp theo