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

シンプルな構造で設置も簡単、マウスで移動も自由でボタンで消すことも出来る、MacやWindowsのスティッキーズ風のモーダルウィンドウ(Modal window)。ポップアップウィンドウに変更するのも簡単。
導入は以下のサンプルを貼付けていくだけで簡単にできる。
<head>〜</head>内にJqueryを取得するコードを記載

javascript

<script src="http://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>
上記&nbsp;の代わりに文字を入れるとタイトル部分に表示される。
付箋・スティッキーズの呼び出し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;にしておいてクリックで呼び出したり、スライドインなどのエフェクトで遊ぶのもいいだろう。
 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク