動かせる付箋・スティッキーズ風のモーダルウィンドウ

シンプルな構造で設置も簡単、マウスで移動も自由でボタンで消すことも出来る、MacやWindowsのスティッキーズ風のモーダルウィンドウ（Modal window）。ポップアップウィンドウに変更するのも簡単。

導入は以下のサンプルを貼付けていくだけで簡単にできる。

<head>〜</head>内にJqueryを取得するコードを記載

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

付箋・スティッキーズ本体のJavascriptは以下

上記と同様に<head>〜</head>内に記載してもいいし、別ファイルにして呼び込んでもいい。

<script type="text/javascript">
function stki(stID,wx,wy,ww,wh,co,bc,lc,zi,tc){
$(stID).css({
position: 'absolute',
top: wy, left: wx,
width: ww, height: wh,
color: co,
'background-color': bc,
'border': lc,
'z-index': zi
}).fadeIn('slow');
$(stID + ' .stittl').css({'background-color': tc}).fadeIn('slow');
$(stID + ' .stittl .sticlose').click(function(){$(stID).fadeOut('slow');});
$(stID + ' .stittl').mousedown(function(e){
var mx = e.pageX; var my = e.pageY;
$(document).on('mousemove', function(e) {
wx += e.pageX - mx; wy += e.pageY - my;
$(stID).css({top: wy, left: wx});
mx = e.pageX; my = e.pageY;
return false;
}).one('mouseup', function(e){
$(document).off('mousemove');
});
return false;
});
}
</script>

最小限必要なスタイルシートcssは以下

別ファイルにして呼び込んでもいい。

CSS

<style>
.stittl {
padding: 1px 3px;
font-size: 13px;
cursor: move;
}
.sticlose {
float: left;
cursor: pointer;
}
.stimain {
padding:3px;
}
</style>

実際の付箋・スティッキーズは以下

<body>〜</body>のどこに記載しても構わない

ポイントはid=”stickies1″

後ほどid名で呼び出すから、id名を変えればいくつでも設置可能。

HTML

<div id="stickies1">
<div class="stittl"><div class="sticlose">□</div>&nbsp;</div>
<div class="stimain">
ここが画面に表示されるテキストになる
</div>
</div>

上記 の代わりに文字を入れるとタイトル部分に表示される。

付箋・スティッキーズの呼び出しJavascriptは以下

<body>〜</body>のどこに記載しても構わない

<script type="text/javascript">
$(function() {
stki('#stickies1',100,100,300,200,'#666','#fff','1px solid #ccc',12,'#eee');
});
</script>

上記により付箋・スティッキーズ本体を表示させている。

変数は以下の通り

stki(id名,表示位置（左から）,表示位置（上から）,ウィンドウ幅,ウィンドウ高さ,文字色,本体背景色,ボーダー色,z-index,タイトル背景色);

個別のid名で自由な位置、サイズ、色で複数設置が可能。

初期表示をdisplay:none;にしておいてクリックで呼び出したり、スライドインなどのエフェクトで遊ぶのもいいだろう。

javascript

CSS

HTML

Related posts: