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）：使用谷歌瀏覽器V14
參考http://jsfiddle.net/SUYA7/爲全樣本
<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="[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>
測試。
幾乎肯定與您的HTML和CSS相關，這是缺少的問題。請提供一個問題的實例。 – andyb
我的電腦沒有你的CSS。你可以在jsFiddle中提供一個工作示例嗎？ – andyb
@andyb - http://jsfiddle.net/SUYA7/ – Ahmad