0

stackoverflow (ユーザー名にマウスを合わせる) や gmail (ユーザー名をクリックする) のように、ハイパーリンクの上にマウスを置くと、お問い合わせページへのリンクを含む連絡先情報を表示したいと考えています。以下は、最新の更新されたコードがどのように見えるかです。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />

<script>
$('#open').mouseenter(function() {
    $('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
    $('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
    autoOpen: false,
    open: function() {
        closedialog = 1;
        $(document).bind('click', overlayclickclose);
    },
    focus: function() {
        closedialog = 0;
    },
    close: function() {
        $(document).unbind('click');
    },
    buttons: {
      /*  
      Ok: function() {
            $(this).dialog('close');
        }
        */
     },
    show: {
            effect: 'fade',
            duration: 800
        },
    hide: {
            effect: 'fade',
            duration: 800
        },

    position: [posX,posY+25],
    resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>




<div id="open">CONTACT US</div>

私が得るエラー

キャッチされていない TypeError: 未定義のプロパティ 'left' を読み取ることができません

4

2 に答える 2

0

もっとコードがシンプルなポップアップ ツールチップを探しているなら、私はこれのカスタマイズされたバージョンを楽しんでいます。

http://devseo.co.uk/examples/pure-css-tooltips/#

これがあなたにとってあまりにも空想的である場合、それはこのより基本的なバージョンの上にいくつかの css3 トランジションがあっただけであり、ここでよく説明されています:

http://sixrevisions.com/css/css-only-tooltips/

于 2013-06-19T06:53:50.483 に答える