- ベストアンサー
jQueryのポップアップでデザインがおしゃれなものはありませんか？
jQueryのポップアップでデザインがおしゃれなものはありませんか？ いろいろライブラリを探してみているのですがいいものが見つかりません。 一応ポップアップを探しているのですが用途としては div要素に載った時そのことの説明文を出したいと思っています。 ちょっとしゃれているからおススメ！みたいなのがあったら教えてください。 マウスのある位置から右上側に吹き出しが理想的です
- mr-r00
- お礼率93% (480/516)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞ライブラリを探してみているのですがいいものが見つかりません。 何をもって「おしゃれ」と言うかは人によって違うのでなんとも言えないけれど、大抵のものはCSSで色合いやレイアウトは調整できると思いますけど？ ライブラリによっては、かなりのバリエーションを持っているものもあるみたい。 http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_plugin_tooltip ポップアップ限定の機能だけなら、自作してもそれほど大変ではないので、自由にデザインするというのもありかも。 http://hkom.blog1.fc2.com/blog-entry-600.html
関連するQ&A
- jQueryでポップアップの中にポップアップ
<html> <head></head> <style type="text/css"> .popup { position:absolute;bottom:0;left:0;width:300px;padding:1px 5px;border:solid 1px #000;background:#fff;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.b').live({ /* <= bind? */ mouseenter:function(){ var target = $( $(this).children().filter('.c').attr('href') ); $(this).css('position','relative'); $(this).append('<div class="popup">'+target.html()+'</div>'); }, mouseleave:function(){ $(this).css('position','static'); $(this).children().filter('div').remove(); } }); }); </script> <body> <div id="a1"><p>a1a1a1</p></div> <div id="a2"><p>a2a2<span class="b"><a href="#a1" class="c">#a1</a></span>a2</p></div> <div id="a3"><p>a3<span class="b"><a href="#a2" class="c">#a2</a></span>a3a3</p></div> </body> </html> このような感じで、#a2にマウスカーソルを合わせたらid="a2"の内容が吹き出しのような感じでポップアップし、 その中に含まれる#a1にマウスカーソルを合わせたらそこからさらにid="a1の内容がポップアップする仕組みを作りたいのですが、 ポップアップの上にマウスカーソルを合わせることができずに困っています。 参考：jQuery の hover() について調べたことのまとめ http://d.hatena.ne.jp/tilfin/20080615/1213608859 参考：.live()でhoverイベントに複数の関数をバインドできない http://jsdo.it/cancer6/mh9t 自分で調べてみて分かったことは ・hover(fn1,fn2)はfn1=mouseover,fn2=mouseoutではなくfn1=mouseenter,fn2=mouseleave ・後から追加した要素(ポップアップ)の中の要素にもhoverを有効にするにliveでhoverを設定する必要がある ・liveでhoverイベントを指定するときはmouseenter,mouseleaveの2つに分けて指定する必要がある 上記のコードを保存して見ていただけると分かると思うのですが、 liveにするとポップアップの上にカーソルを合わせることができず、 bindにするとポップアップの上にカーソルを合わせることができます。 ポップアップはclass="b"の子要素となるようにしているので、 ポップアップにマウスカーソルが合わさっている状態＝class="b"からmouseleaveしてない状態となっていると思うのですが…。 どのようにすれば「後から追加された要素(ポップアップ)」内にもhoverイベントを適用させつつ、 「後から追加された要素(ポップアップ)」内にマウスカーソルを乗せられる状態にできますか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- jqueryを使ってポップアップを作ろうとしています。
jqueryを使ってポップアップを作ろうとしています。 アイコンにマウスオーバーでポップアップ表示、ポップアップの×をクリックしてポップアップ削除という動きまではできています。 しかしマウスオーバーのアイコンはul liの中にあるのに、ポップアップはulの外に置かれているため、thisが使えず、アイコンにマウスオーバーすると全てのポップアップが表示されてしまいます。 これをマスウオーバーしたアイコンのポップアップのみ表示できるようにしたいです。 下記にソースになります。表示させたいのはアイコン02にカーソルを合わせた場合のみになります。 よろしくお願いいたします。 JS ---------------------------------------------------------------- $(function(){ $(".popup").hide(); $(".box ul li.icon02").mouseover(function(){ $(".popup").fadeIn("fast").css({ top:10+"px", left:-95+"px"}); }); $(".popup img.closed").click(function(){ $(".popup").fadeOut("fast"); }); }); html ---------------------------------------------------------------- <div class="box"> <div class="boxIn"> <ul> <li class="ico01"><a href="#"><img src="アイコン１url" /></a></li> <li class="ico02"><a href="#"><img src="アイコン２url" /></a></li> <li class="ico03"><a href="#"><img src="アイコン３url" /></a></li> </ul> <!--▼pop-up部分--> <div class="popup"> <p>●●<img src="クローズボタンurl" alt="close" width="12" height="12" class="closed" /> </p> <div class="popInner"> <p>ポップアップの中身</p> <!--#popInner--> </div> <!--#popup--> </div> <!--▲pop-up部分ここまで--> <!--#boxIn--> </div> <!--#box--> </div> 以下 <div class="box"> ～～同じ構成要素の繰り返し。
- ベストアンサー
- JavaScript
- jQueryのmouseenterについて
jQueryで、#div1 にmouseenter,mouseleaveを設定していますが、#div1の領域の一部に重なって表示している別の要素（#div1の子要素ではない）があり、その上にマウスが乗るとmouseleaveが発動します。 これを、発動しないようにする方法はあるでしょうか？
- 締切済み
- JavaScript
- ポップアップメニューをつくるには
メニューのところにマウスを乗せたとき、メニューのすぐ下にリンクが出る形のポップアップメニューを作りたいと思っています。 Dreamweaver2004を使ってるので、ソフトの機能でポップアップメニューを作れますが、これでやると長々と分かりにくい文がついてくるので、できれば他の方法でやりたいです。 もっとすっきりしたプログラムで、マウスを乗せると出てきてはずすと消えるタイプのポップアップメニューの参考例はないでしょうか？ ずっと探していますが、どうしても見つけることができません。 HPなど教えていただけるとありがたいです。 よろしくお願いします。
- 締切済み
- JavaScript
- おしゃれなデザインのトースターを探しています
キッチンのポイントになるようなおしゃれなオーブントースターを探しています。予算は1万円くらいです。 ビタントニオ、クイジーナートなどの海外製のものがデザイン的に好きなのですが、使い勝手や性能はどうでしょうか。 用途はパンを焼いたり、おもちを焼いたりするのがメインです。 ポップアップ式ではなくてドアがついているタイプをさがしています。 別にオーブンを持っているので高性能なオーブン機能は必要としていません。 使ってみた感想や、おすすめの製品があれば教えてください。 よろしくおねがいします。
- ベストアンサー
- その他（生活家電）
- ポップアップメニュー
<div id="body"> <div id="navi"></div> </div> の状態で、<div id="navi"></div> にFireworksで作成したポップアップメニュー(Fireworks html)を配置すると、サブメニューが変な位置に表示されます。 通常の<body></body>内であれば問題なく表示されるのですが、<div>内では正しく表示されないものなのでしょうか？ どなたかご教授ねがいます。
- 締切済み
- HTML
- googleMapAPIの吹き出しリンクからポップアップしたい
こんにちは、 今google Map API version2でページを作成しています。 地図の吹き出しの中にはhtmlのソースが使えるのですが、そのリンクをクリックしたときに別ウィンドウをポップアップさせる方法（サイズを固定してポップする方法）はありますか？ ちなみに <div><a href="./hogehoge.html" Target="_blank" >リンク</a></div> はうまくいくのですが、これだとサイズ固定でなく、ポップアップされません。 下記の <div><a href="#" onclick="window.open(\'./hogehoge.html\',\'moviewin\',\'width=500,height=320\');">リンク</a></div> だと、javascriptの中から読んでるからだと思いますが、うまくいきません。 解決法を知っている方、 是非とも宜しく尾根会いいたします。
- ベストアンサー
- AJAX
- 画像中のある座標でマウスオーバー時にポップアップテキスト
画像の中の任意座標にマウスをもっていった時に、マウスより少し上の位置に説明文等のテキストをポップアップ表示させ、マウスアウトでポップアップ表示を消すのに何か良い方法はありませんか？ 画像はテーブルで分割していない一枚のイメージで”画像の中のある場所”はランダムです。 表示イメージはこんな感じ ●：画像中の任意の座標 -------------------------------- ｜ ● ｜ ｜ ココに説明文をポップアップ表示 ｜ ●＜-（マウス） ｜ ｜ ● ｜ ｜ ● ｜ --------------------------------
- ベストアンサー
- JavaScript
- ポップアップ？ をコピーしたい
ＨＰなどで、文字にマウスを当てると出てくる説明文みたいなものを、コピーする方法はありますか？ もしくは、ポップアップをそのページ内で全表示できるような仕組みはありませんか？
- ベストアンサー
- その他(Windows)
お礼
ありがとうございました 参考になりました！