ボタンをクリックで全画面にログインフォームを表示するアイディア Fullscreen Login

PR

Fullscreen Login
By Tom Champion

See the Pen Fullscreen Login by Tom Champion (@littlefishcreate) on CodePen.

DEMOとコード http://codepen.io/littlefishcreate/pen/odJip

Go Fullscreenというボタンをクリックすると、ログインフォームが全画面に羊皮される仕組みです、ログインフォームは右上のペケで消せる用になっています。

仕組みはシンプルに、position: fixed;を使って全体を覆うようにして、z-indexで最前にくるようになっています。フェードイン・フェードアウトはjavascriptの方で設定されています

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー