Skip to content

Instantly share code, notes, and snippets.

@CLCL
Last active December 18, 2015 01:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CLCL/5708261 to your computer and use it in GitHub Desktop.
Save CLCL/5708261 to your computer and use it in GitHub Desktop.
jQueryを使って、モーダルスクリーンを表示したり消したりするオブジェクトmodalScreen(jQueryプラグインではない)。毎回ベタで書きそうなのでコピペ元として。
/* jQueryで、ウェブブラウザの画面全体をグレーに覆う
モーダルスクリーンを表示します。
var s = new ModalScreen; // オブジェクト作成
s.show(); // モーダルスクリーンに切り替え
s.hide(); // モーダルからモードレスに戻す
*/
var ModalScreen = function() {
this.div = $("<div>").css({
position : "absolute",
background: "rgba(64, 64, 64, 0.9)",
"z-index" : 40,
top : "0px",
left : "0px"
});
// clickしたら消えるようにする
var self = this;
this.div.click( function() {
self.hide();
});
};
ModalScreen.prototype = {
show: function() {
this.div.css({
height: "100%",
width : "100%"
});
$("body").append(this.div);
},
hide: function() {
this.div.detach(); // removeだとeventとか消えてしまう
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment