自分向け簡易モーダルウィンドウ

自分用なのでかなり簡易的に実装
特に中国などは回線状況が悪いので、Ajaxなんかで読み込み中を出さないと通信しているのか不安になることが多い。
いつもは、ローディングを出すようにしていたけど、メッセージが出るほうが人に優しい時もある。
アラートを出すといちいちOKなんかをクリックしなくては行けないし、自分なりにこの「簡易モーダルウィンドウ」はこれから良く使っていきたいのでメモ。

HTML部分

<div id="modal-bg"><span></span></div>

これだけ
spanの中にメッセージを入れて表示させる方向。
jQueryでappendしてしまってもいいかもレベル。

CSS部分

/* モーダル 背景エリア */
#modal-bg {
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	left:0;
	z-index: 1;
}
/* メッセージ */
#modal-bg span {
	width: 300px;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 10px;
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -175px;
}

よそから取ってきたものを少し修正。
まわりをグレーアウトしつつ、メッセージを表示な感じのCSS

jQuery部分

単に表示して消えるだけなら

$("#modal-bg span").html('保存しています。');
$('#modal-bg').fadeIn(1000).delay(2000).fadeOut(1000);

Ajaxと組み合わせるなら

$("#modal-bg span").html('保存しています。');
$('#modal-bg').fadeIn(1000);

でAjaxの成功時に

$('#modal-bg').fadeOut(1000);

で消す。

うまく動いているし、コードも少なく快適そう。
ローディングに比べて画像を使わない点も気分的にエコ。

AMAZON ver0.1 FBAラベルを無駄にしないやつ

AMAZONもverつけていこうと思う。 セラーセントラルだとFBAラベルは常に1番目から作られてし...

英語版WindowsでのCSV日本語文字化け対策

システムでCSVをダウンロードなんていうものを多用しています。 ただ、使っているOSが英語版なので、...

css+jQueryでお手軽に行をハイライト

自分用メモ。 なんか表がひたすら並んでる中で、どこまでやったか分からなくなることからミスがでているこ...

Couldn’t agree a client-to-server cipherなるエラー

SSHを使う機会が出てきたのですが、久々にputtyを立ち上げてみたら 「Couldn't agre...

WordPressで中国語サイトを作る方法

セブはまあ暮らしやすい方だと思いますが、それはここ3年くらいで先輩日本人たちがいろんなことを切り開い...

新事務所の内装開始

おかげさまで、月曜日に新事務所の契約をすませてきました。 本日、内装工事に取り掛かっています。 主...

lolipopアップデート

着々とロリポがアップデートされていますが、ちょっとしたメモ。 .htaccessの AddType ...

旧正月の休み

だいぶ久々の(半年ぶり)投稿となってしまいましたが、、 ひとまず来年の自分へのメッセージ。 旧正月の...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)