コード トレイルをhttp://jsfiddle.net/xBJeV/6/に追加しました。1.ダイアログが消えずにダイアログで値を選択する方法について助けが必要です。2. マウスが div の外に出たら、ダイアログを閉じる必要があります。
前もって感謝します
<div class="editionDetailAction">Action for Item 1</div>
<div class="editionDetailAction">Action for Item 2</div>
<div class="editionDetailAction">Action for Item 3</div>
<div class="editionDetailAction">Action for Item 4</div>
<div id="actionsPopup">
<ul><li><a href="http://www.google.com">Add xyz</a></li></ul>
<ul><li>Manage xyz</li></ul>
<ul><li>Show xyz</li></ul>
</div>
jqueryコード
$(document).ready(function () {
$('.editionDetailAction').click(function (e) {
$("#actionsPopup").dialog("option", { position: [e.pageX+5, e.pageY+5] });
});
$("#actionsPopup").dialog({
autoOpen: false,
dialogClass: 'actionsPopup',
maxWidth:100,
maxHeight: 100,
width: 200,
height: 80,
resizable: false,
});
$(".editionDetailAction").bind("click", function () {
$("#actionsPopup").dialog('open');
});
$(".editionDetailAction").bind("mouseleave", function () {
$("#actionsPopup").dialog('close');
});
});
私のCSS
.editionDetailAction { width: 150px; height: 30px; border: solid 1px #ddd; }
.actionsPopup .ui-dialog-titlebar { display:none; }