• ベストアンサー

クリックした場所にミニフレームを表示したい

クリックした場所にミニフレームを表示したい クリックしたその場所に小さいフレーム（ダイヤログ）を表示したいのですが、 どのように行えばいいでしょうか イメージとしてはGoogleカレンダーの予定を作成する時のような物を表示したいと思っています。 ちなみにすでに使用しているjavascriptがprototype.jsと相性が悪いので、これを使用しない方法でお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

ライブラリーを使わずjavascriptのみでやりたいのですね。 マウスクリックのイベントハンドラーを追加し、イベント発生点の（X,Y） 座標を取得して、そこにposition absoluteした<DIV>を移動させて、 表示させればよいかと。 ただ、ライブラリー使わないとあらゆるブラウザーで同じ振る舞いを させるの仕組みと、検証が面倒になります。 （例　IE8とFirefox3.6でOKでした。） 全角空白は半角空白にしてね！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PopUpTest</title> <style type="text/css"></style> <script type="text/javascript"> try {document.addEventListener('click',function(e){clickFunc(e)},true);} 　catch(e){document.attachEvent('onclick',function(){clickFunc()});} function clickFunc(e){ 　var pop = document.getElementById("popup"); 　var eve = (e||window.event); 　pop.style.display="block"; 　pop.style.position = 'absolute'; 　pop.style.top=eve.clientY+"px"; 　pop.style.left=eve.clientX+"px"; } //evt.clientX </script> </head> <body> <div id="popup" style="display:none;border:1px solid black;"> ポップ！ </div> <p>Hello World</p><p>Hello World</p><p>Hello World</p><p>Hello World</p> <p>Hello World</p><p>Hello World</p><p>Hello World</p><p>Hello World</p> <p>Hello World</p><p>Hello World</p><p>Hello World</p><p>Hello World</p> <p>Hello World</p><p>Hello World</p><p>Hello World</p><p>Hello World</p> <p>Hello World</p><p>Hello World</p><p>Hello World</p><p>Hello World</p> </body> </html>

mizutaki
質問者

お礼

まさしくこのような処理を探していました。 今あるシステムにかなりそのまま利用できそうなくらいに良い感じです。 ありがとうございました。

すると、全ての回答が全文表示されます。

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

No.1です。 pop.style.top=eve.clientY+window.pageYOffset+"px"; pop.style.left=eve.clientX+window.pageXOffset+"px"; 又は pop.style.top=eve.clientY+document.body.scrollTop+"px"; pop.style.left=eve.clientX+document.body.scrollLeft+"px"; を加算しないと、スクロールしたら変になります。 それから、ミニフレームに閉じるボタンもお忘れなく。 さらにミニフレームがクリックされたら、イベント伝播止めましょう。

すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

＜続きです＞ <script type="text/javascript"> <!-- var miniPop = {}; miniPop.init = function() { div = document.getElementById('mini').style.display = "none"; this.set(); var b = document.body; try { b.addEventListener('click', function(e){ miniPop.click(e) },true); } catch(e) { b.attachEvent('onclick', function(e){ miniPop.click(e) }); } } miniPop.set = function(d) { var div = document.getElementById('mini'); if (!d) { d = new Date(), this.y = d.getFullYear(), this.m = d.getMonth(); } else { this.m += d, this.y += (this.m<0 || this.m>11)?d:0, this.m = (this.m+12)%12; } div.getElementsByTagName('DIV')[1].innerHTML = this.calendar(this.y, this.m); } miniPop.calendar = function(y, m) { var c, x, b, h; c = -new Date(y, m).getDay(x = new Date(y, ++m, 0).getDate(b = -1)); h = '<table><tr><th class="prev"><<</th><th colspan="5">'; h += y + '/' + m + '</th><th class="next">>></th></tr><tr>'; h += '日月火水木金土'.replace(/(.)/g,'<th>$1</th>'); while ((b++>5?b=0:b) | c<x) { h += (b?'':'</tr><tr>') + '<td' + (b==6?' class="sat">':b==0?' class="sun">':'>'); h += (++c<1 | c>x?'-':c) + '</td>'; } return h + '</tr></table>'; } miniPop.click = function(evt) { var t = evt.srcElement || evt.target, p = t.parentNode; var styl = document.getElementById("mini").style; while (p && p.nodeName != "DIV") p = p.parentNode; if (p && p.parentNode.id == "mini") { if (t.nodeName == "TH" && (d = {next:1, prev:-1}[t.className])) this.set(d); if (t.nodeName == "BUTTON") styl.display = "none"; } else { if (styl.display != "none") return; var dc = document.compatMode?document.body:document.documentElement; styl.top = (window.pageYOffset || dc.scrollTop) + evt.clientY; styl.left = (window.pageXOffset || dc.scrollLeft) + evt.clientX; styl.display = "block"; } } miniPop.init(); //--> </script> </body> </html>

mizutaki
質問者

お礼

がんばってくれたところありがとうございます。 ちなみに私が行っていたのはカレンダーの編集ページの日や時間をクリックすると 「ここに作成しますか？」 みたいなウィンドウが出てくる所なので 残念ながら少し違いました。 別の機会がありましたら、参考にさせていただきます

すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

Googleカレンダーを使ったことないのでわからなかったのですが、ぐぐってみたところとこんな感じのものでしょうか？ http://www.google.co.jp/ig/directory?hl=ja&type=gadgets&url=www.google.com/ig/modules/calendar3.xml ご質問の表示する方法については、すでにNo1様が回答なさっていますので… （スクロール時に対応していないかも…） クリックすると表示と言っても、サイト上にリンクとか無いのでしょうか？ 表示したポップアップの操作でクリックしても、↑のクリック処理が動いてしまったりとか いろいろ考えることはありそうな気がしますが、表示＋αのものを… 最終的にどのようなものを実装したいのか不明ですが、全部を素で組み立てるとなると、ちょっと面倒いかも。 文字数の関係で前半と後半に分かれてしまいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#mini, div#mini * {margin:0; padding:0; } div#mini { position:absolute; text-align:center; border:2px ridge #89c; background-color:#ffe; z-index:5; } div#mini div.title { padding:3px; color:#fff; background-color:#47c; } div#mini div.title button { position:absolute; top:2px; right:4px; width:1.6em; } div#mini table { font-size:90%; border-collapse:collapse; margin:8px auto; border:4px solid #cdf; background-color:#fff; } div#mini table th { background-color:#cdf; } div#mini table td { text-align:right; padding:3px; } div#mini table .next, div#mini table .prev { font-size:60%; cursor:pointer; } div#mini table td.sun { background-color:#fee; } div#mini table td.sat { background-color:#eef; } div#mini textarea { margin:0px 6px 6px 6px; overflow:scroll; background-color:#fff; } </style> </head> <body> <div id="mini"> <div class="title">title <button type="buton">x</button> </div> <div class="cal"> </div> <form> <textarea name="text" cols="28" rows="8" value=""></textarea> </form> </div> <div style="width:1200px; height:1000px; background-color:#dfd;">テスト用の範囲</div>

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する