送信フォームで、送信の待ち時間中にユーザーが他のリンク個所を押してしまう事があります。
その動作を防ぐために、送信ボタンを押したら画面全体にローディング中の文言を出す、jQueryプラグインを紹介します。
そのプラグインの名前は、jQuery BlockUI Pluginです。
参考サイトでは、いくつかの動作パターンが載っていますが、実装も簡単です。
今回は良くあるローディング中画像と文言の出るサンプルを制作しました。
動作サンプル
HTMLサンプル
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery BlockUI サンプル</title> <style> body { margin: 20px; font-family: Verdana, Arial, "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif; } h1 { font-size: 140%; } input { font-size: 100%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.blockUI.js"></script> <script> $(document).ready(function() { $('#foo').click(function() { $.blockUI({ css: { border: 'none', //ボーダー有無 padding: '15px', //パディング backgroundColor: '#fff', //背景色 color: '#333', //フォントカラー '-webkit-border-radius': '10px', //角丸 '-moz-border-radius': '10px', //角丸 opacity: .8 //透明度 }, message: $('#tallContent')} //メッセージ表示内容 ); $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI); //クリックで非表示 //setTimeout($.unblockUI, 2000); //2秒でポップアップを非表示にする }); }); </script> </head> <body> <div id="tallContent" style="display:none"> <h1>しばらくお待ち下さい</h1> <p><img src="gif-load.gif" width="40"></p> </div> <div class="container"> <h1>jQuery BlockUI サンプル</h1> <input type="button" id="foo" value="送信" /> </div> </body> </html>