1
私の質問はOpening JQuery Ui Dialog in MousePositionと似ていますが、クリックしたボタンのすぐ近くにJqueryダイアログボックスを表示したい点が異なります。私の現在の問題は、私はposition属性を設定する際は、以下を使用した場合意図したとおりPageYとClientYマウスの位置を使用した相違の結果
$("button.deleteEmailRow").live("click", function (e) {
var target = this
$("#emailAddress").html(this.name); // not imp for my problem
$("#dialog-email-confirm").dialog({
autoOpen: false,
width: 400,
modal: false,
resizable: false,
dialogClass: 'dialogs-only',
buttons: {
"Delete Email Recipient": function() {//snip;
return false;},
"Cancel": function() {//snip;
return false;
}
}
});
$("#dialog-email-confirm")
.dialog('option', 'position', [e.pageX+30, e.pageY])
.dialog('open');
});
は、しかし、それは動作します使用している場合、ダイアログボックスは、ページの一番下でのショーであるということです。
$("#dialog-email-confirm")
.dialog('option', 'position', [e.clientX+30, e.clientY])
.dialog('open');
Jquery websiteによれば、最初のスクリプトが機能するはずです。
マウスの動きを追跡するときは、通常、実際のマウスポインタの位置は である必要があります。 ハンドラに渡されるイベントオブジェクトには、マウス座標に関する情報が含まれています。 .clientX、.offsetX、および.pageXなどのプロパティは使用できますが、ブラウザごとに のサポートが異なります。幸いにも、jQuery は、すべてのブラウザで を使用できるように、.pageXおよび.pageYプロパティを正規化します。これらのプロパティは、 のX座標とY座標に、ドキュメントの左上隅を基準にしたマウスポインタを提供します。上記の例の出力には が示されています。
次のように値が同じであることを確認し、Y座標に関して違いがあることを確認しました。
var pageCoords = "(" + e.pageX + ", " + e.pageY + ")";
var clientCoords = "(" + e.clientX + ", " + e.clientY + ")";
alert(pageCoords + '\n' + clientCoords);
私はQuirksModeを読み、また期待通りに動作some test codeの周り果たしています。なぜ私のスクリプトで違いが生じるのですか？私のHTML構造に関連していますか？
編集（更新HTML）：
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<title></title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css">
<link href="/Content/960.css" rel="stylesheet" type="text/css">
<link href="/Content/themes/liberty/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="/Content/themes/dialogs-only/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css">
<link href="/Content/sexybuttons.css" rel="stylesheet" type="text/css">
<link href="/Scripts/messagebar/skins/plain/skin.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div id="header" class="container_12"></div>
<div id="menuwrapper"></div>
<div id="content" class="container_12">
<div id="main" class="grid_12 alpha omega">
<h2>
Configuration Settings
</h2>
<form action="/Settings/Edit" method="post">
<fieldset>
<legend>Settings</legend> // snip
<div class="editor-label">
<label for="EmailSuccessList">List of recipients for Successful Notifications</label>
</div>
<div class="editor-field">
<fieldset>
<input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="4eedd5a0-076b-4bc6-9a07-7455df9c5d83"><input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="151d8ad0-f204-445c-8778-5207ddbae952"><input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="7b51d4b0-78b6-4ccd-a886-ffef9fe8a00f"><input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="0c7f4c5f-7344-4b47-9202-3ff61ce843fc">
<table id="editorEmailSuccessRows" class="editorEmailSuccessRows">
<tr class="editorRow">
<td class="emailRow">
<input class="text-box single-line" id="EmailSuccessList_4eedd5a0-076b-4bc6-9a07-7455df9c5d83_" name="EmailSuccessList[4eedd5a0-076b-4bc6-9a07-7455df9c5d83]" type="text" value="[email protected]">
</td>
<td>
<button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="[email protected]"><span><span><span class="delete">delete</span></span></span></button>
</td>
</tr>
<tr class="editorRow">
<td class="emailRow">
<input class="text-box single-line" id="EmailSuccessList_151d8ad0-f204-445c-8778-5207ddbae952_" name="EmailSuccessList[151d8ad0-f204-445c-8778-5207ddbae952]" type="text" value="[email protected]">
</td>
<td>
<button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="ab[email protected]"><span><span><span class="delete">delete</span></span></span></button>
</td>
</tr>
<tr class="editorRow">
<td class="emailRow">
<input class="text-box single-line" id="EmailSuccessList_7b51d4b0-78b6-4ccd-a886-ffef9fe8a00f_" name="EmailSuccessList[7b51d4b0-78b6-4ccd-a886-ffef9fe8a00f]" type="text" value="[email protected]">
</td>
<td>
<button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="[email protected]"><span><span><span class="delete">delete</span></span></span></button>
</td>
</tr>
<tr class="editorRow">
<td class="emailRow">
<input class="text-box single-line" id="EmailSuccessList_0c7f4c5f-7344-4b47-9202-3ff61ce843fc_" name="EmailSuccessList[0c7f4c5f-7344-4b47-9202-3ff61ce843fc]" type="text" value="[email protected]">
</td>
<td>
<button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="[email protected]"><span><span><span class="delete">delete</span></span></span></button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="lastRow">
<a href='/Settings/BlankEmailEditorRow?collectionName=EmailSuccessList' class=" sexysimple sexygreen" id='addNewSuccessEmail'><span class="add">Add new recipient</span></a>
</td>
</tr>
</table>
</fieldset>
</div><button type="submit" value="Save Configuration" id="save" name="save"></button> <a href="/Settings" id="cancelEdit">Cancel</a>
<div class="cancel" style="display: none">
<div id="dialog-confirm-cancel" title="Cancel Edit?" class="diag">
<p>
Any changes you have made will not be saved.
</p>
</div>
</div>
<div class="demo" style="display: none">
<div id="dialog-email-confirm" title="Delete Email?" class="dialogs-only">
<p>
Are you sure you wish to delete this recipient from the list : <span id="emailAddress" style="font-weight: bold;"></span>?
</p>
</div>
</div>
</fieldset>
</form>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
Google ChromeののV14に
を使用してテストサンプル全体のためにhttp://jsfiddle.net/SUYA7/を参照してください。
あなたのHTMLとCSSには、まったく関係がありますが、質問には欠けています。問題の実例を提供してください。 – andyb
私のコンピュータにあなたのCSSはありません。あなたはjsFiddleで実用的な例を提供できますか？ – andyb
@andyb - http://jsfiddle.net/SUYA7/ – Ahmad