[ホームページ制作] モーダルウィンドウのサンプルコード
WEBサービスやシステムの部品開発を行なっている時に、デバッグの為に、console.logを使うことが多くありますが、手早い開発を行う場合はalertで値を表示する事もまれにあります。
こんなとき、while文やfor文で、無限ループを起こそうもんなら、ブラウザがうんともすんとも動かなくなり、運が悪いとアプリのシャットダウンすらできなくなる時もあります。
一昔前にはブラクラ（ブラウザ・クラッシュ）として、危険サイトなどにアクセスして、アタックを受けてしまうようなことがありましたが、chromeブラウザでは、alert関数が大量に呼び込まれた時は、それを終了できるような機能も盛り込まれいます。
ということで、alertを使うことはあまり良いという人が少ないのと、デザイン要素がいじれないというデメリットから、サイト内でモーダルウィンドウを表示するデザイン思考が増えてきました。
さらに、最近のWEBページはスマホアプリさながらに、アニメーション機能も要求されることが多くなってきており、単にモーダルウィンドウを表示したり非表示にしたりするだけでは物足りず、フワッと感じよく現れてほしいとか、画面上から降りてくる様なイメージで・・・という風にオーダーされるケースも少なくありません。
そこで、以前に作ったスニペットを掲載しておくので、コピペしてどんどん使ってくだされ。
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Modal</title> <link rel="shortcut icon" href="img/favicon.png"> <link rel='stylesheet' href='modal.css'> <script type='text/javascript' src='modal.js'></script> </head> <body> <h1>Modal</h1> <a class="modal-switch" href="#" data-target-selector="#modal">Modal-view</a> <div id="modal"> <div class="modal-window"> Modal-window-sample<br> </div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
html,body{ height:100%; margin:0; padding:0; border:0; } body{ padding:20px; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #modal{ position:absolute; display:none; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); border:0; margin:0; padding:0; } #modal[data-view="1"]{ display:block; animation: modal-bg-view 0.3s linear forwards; } #modal[data-view="0"]{ display:block; animation: modal-bg-hidden 0.3s linear forwards; } #modal > .modal-window{ position:absolute; top:100px; left:150px; display:block; border:1px solid #CCC; border-top:20px solid #CCC; border-radius:4px; padding:10px 20px; background-color:white; white-space:nowrap; } #modal[data-view="1"] > .modal-window{ animation: modal-window-view 0.3s linear forwards; } #modal[data-view="0"] > .modal-window{ animation: modal-window-hidden 0.3s linear forwards; } @keyframes modal-bg-view{ 0%{ opacity:0.0; visibility:hidden; } 100%{ opacity:1.0; visibility:visible; } } @keyframes modal-bg-hidden{ 0%{ opacity:1.0; visibility:visible; } 100%{ opacity:0.0; visibility:hidden; } } @keyframes modal-window-view{ 0%{ transform:translate(0,-50%); } 100%{ transform:translate(0,0); } } @keyframes modal-window-hidden{ 0%{ transform:translate(0,0); } 100%{ transform:translate(0,-50%); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
;(function(__w,__d){ var $$event = function(e, m, f){ if (typeof e.addEventListener !== "undefined"){ e.addEventListener(m, f, false); } else if(typeof e.attachEvent !== "undefined"){ e.attachEvent('on' + m, function(){f.call(e , __w.event)}); } }; var $$error = function(m){ console.log("[Modal] Error : "+m); }; var $$ = function(){ // start if(__d.readyState === "complete"){ this.start(); } else if(__d.readyState === "interactive"){ $$event(window , "DOMContentLoaded" , (function(e){this.start(e)}).bind(this)); } else{ $$event(window , "load" , (function(e){this.start(e)}).bind(this)); } }; $$.prototype.start = function(){ var switches = __d.querySelectorAll(".modal-switch"); for(var i=0; i<switches.length; i++){ $$event(switches[i] , "click" , (function(e){this.click_modalSwitch(e)}).bind(this)); } }; $$.prototype.click_modalSwitch = function(e){ if(!e || !e.currentTarget){ $$error("Not event"); return; } var selector = e.currentTarget.getAttribute("data-target-selector"); if(!selector){ $$error("Not selector"); return; } var target = __d.querySelector(selector); if(!target){ $$error("Not target"); return; } this.toggle_modalSwitch(target); return false; }; $$.prototype.toggle_modalSwitch = function(element){ if(!element){ $$error("Not switch-element"); return; } var currentValue = element.getAttribute("data-view"); if(!currentValue){ $$event(element , "click" , (function(e){this.toggle_modalSwitch(e.currentTarget)}).bind(this)); } if(currentValue === "1"){ element.setAttribute("data-view","0"); } else{ element.setAttribute("data-view","1"); } }; new $$; })(window,document); |
画面イメージ
Modal-viewリンクをクリックすると・・・
解説
HTMLに事前に埋め込んだモーダルウィンドウのエレメントをcssアニメを使って表示させるというコードですが、JSでページ読み込み時に#modalを検索してイベント登録する仕様にしています。
“#modal > .modal-window”の構成が保たれていれば、内容はいかようにでも変更して使えるので、ページに組み込むのも簡単に行えます。
cssコードも、アニメ部分や属性セットの箇所を変更しなければ、デザインを大幅に変えても使えます。
肝心のjsコードは、jQueryなどは一切不要で、それぞれのエレメントのスイッチを切り替えるように処理していますが、ここはあまりいじらなくても使えるでしょう。
もっとコピペしやすい様に、codepenにもcreateしておきました。
See the Pen Modal window by YugetaKoji (@geta1972) on CodePen.
モーダルウィンドウとは
ちなみに、気になったのでモーダルウィンドウという言葉を調べておきました。
wikipediaでは、
コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。
まさにalert関数のダイアログが意味どおりなのですが、こうしたデザインも進化していてニュアンスが変わってきている様にも思えますね。
もはやWEBデザインにおいてモーダルウィンドウと聞くと、ブラウザネイティブのダイアログではなく、html内で表示させる要素の方が意味が通ることが多い気もします。
これって職業病ですか？？？