mixiのPC版で絵文字入力するときに「絵文字」アイコンをクリックするとポップアップが出て絵文字入力ってありますよね。
今日はあんなポップアップの作り方の勉強です。
まず表示部分。
<html>htmlはこんな感じにしておきます。
<title>
<script type="text/javascript" scr="js/jquery-1.3.2.js">
<!-- ドラッグできるように -->
<script type="text/javascript" scr="js/ui.core.js">
<!-- ドラッグできるように -->
<script type="text/javascript" scr="js/ui.draggable.js">
</title>
<body>
ポップアップ
<hr>
<!-- ポップアップ -->
<div id="popup">
ココにポップアップ表示
</div>
<!-- ポップアップ以外をクリックすれば、ポップアップが消えるように -->
<div id="delete"></div>
</body>
</html>
<div id="popup"></div>の中にポップアップさせたい内容を書きます。
次はCSS。
div#popup {
position: absolute; /* 移動できるように */
z-index: 99; /* z-indexは高く */
}
div#delete {
position: absolute; /* absoluteで！ */
z-index: 0; /* div#popupより低く！ */
display: none; /* 初期は非表示 */
}CSSはこんな感じ。ではjavascript部分(jQueryを使います）
$(function() {
// パレットをclickでbind()しておく
$("div#popup").bind("click", $(this), popup);
// パレット以外の部分をクリックすると消えるように
$("div#delete").bind("click", function() {
$("div#popup").hide(); // パレットを非表示
$(this).hide(); // 自身も非表示
});
});
function popup(e) {
// パレットを表示
$("div#popup").css({"top":e.pageY-100,"left":e.pageX+50}).show().draggable();
// パレット以外の部分をクリックすると消す部分（mask）の処理
var height = $(document).height();
var width = $(document).width();
$("div#delete").css({"width":width,"height":height,"top":0,"left":0});
$("div#delete").show();
}こんな感じです。簡単にサンプルを書きましたが、後はお好みで変えてやればOKです。
ちなみに↑のサンプルソースは動作確認していませんので、もし間違いがあれば連絡くだされ；；
以上でえぇぇぇす。
0 件のコメント:
コメントを投稿