5

クリックしたボタンのすぐ下にダイアログを配置しようとしています。以下：

$(document).on('click', '.my_buttons', function(e){
    $('#my_dialog').dialog("option", "position", [e.pageX, e.pageY]);
    $('#my_dialog').dialog('open');
});

そのクラス名を持つ複数のボタンがページに存在する場合、正しく機能しません。クリックしたボタンではなく、最後のボタンの下にダイアログが表示されます。各ボタンにID属性を追加せずにこれを修正する方法はありますか？

また、ボタンが1つしかない場合は、上記は正常に機能しますが、ボタンの下に表示されますが、ボタンのどの部分をクリックするかによって異なります。ボタンの上隅をクリックすると、ダイアログがそのボタンと少し重なります。クリックしたボタンと重ならないようにするにはどうすればよいですか？

ご協力いただきありがとうございます

4

3 に答える 3

9

イベントページはマウスの位置であるため、イベントページの代わりにオフセットを使用してください

$(document).on('click', '.my_buttons', function(e){
    var offest = $(this).offset();
    var height = $(this).height();
    $('#my_dialog').dialog("option", "position", [offest.left, offest.top+height]);
    $('#my_dialog').dialog('open');
});
于 2013-03-12T21:02:42.013 に答える
2

交換して修正しました

e.pageX, e.pageY

と

e.clientX, e.clientY
于 2013-03-12T21:06:01.120 に答える
1

受け入れられた答えは私にはうまくいきませんでした。jQuery2.2.0とjQueryUIを使用しています-v1.11.4

$(document).on('click', '.my_buttons', function(e){
    $('#my_dialog').dialog("option", "position", {my: "center top+5", of: e});
    $('#my_dialog').dialog('open');
});

「my」のオプションについては、 .position（）を参照してください

于 2017-01-24T16:01:09.193 に答える