我已經對此進行了幾個小時的試驗，但我仍然感到困惑。
我試圖在單擊鏈接（[a] 標記）時打開 JQuery UI 對話框（模態），從鏈接的 href 獲取對話框視窗的內容。
到目前為止，我已經（從各個地方收集）其中 testb.html 是一個簡單的 html 片段：
<div><p>Some text</p><p>more text</p</div>
這個想法是當錨點（鏈接）被點擊時 testb.html 的內容出現在對話框中。
為什么這不起作用？？？
David（70 歲的前阿爾茨海默病前程式員，幾乎沒有 HTML 經驗）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p><a href="testb.html" class="modal">Click!</a></p>
</body>
</html>uj5u.com熱心網友回復：
您可以使用此代碼：
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p><a href="javascript:void(0)" data-get="testb.html" class="modal">Click!</a></p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
在頁面上存在元素之前運行分配。將其包裝在負載處理程式中
$(function() { // on page load $("a.modal").click(function(e) { e.preventDefault(); $(".container").load(this.href) }); })您無法以您嘗試的方式將容器作為對話框打開。你需要類似的東西
$(function() { // on page load $(".container").dialog({ autoOpen: false, width: 750, modal: true }); $("a.modal").click(function(e) { e.preventDefault(); $(".container").load(this.href) $(".container").dialog('open'); }); })
uj5u.com熱心網友回復：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p><a href="#" id="opener">Click!</a></p>
</body>
</html>
當單擊錨標記時，這將打開一個 jquery 對話框模式。
uj5u.com熱心網友回復：
結合以前的答案，我得到了這個，它有效！
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<p><a href="testb.html" class="modal">Click!</a></p>
<div id="dialog" title="Basic dialog"></div>
<script>
$('.modal').on('click', function (e) {
e.preventDefault();
$('#dialog').load(this.href)
$("#dialog").dialog()
});
</script>
</body>
</html>
隨著codeangler的回答，對話框出現了，但沒有testb.html的內容，而是有div的內容。隨著mplungjan的回答......好吧，我無法讓它作業。有了 Sepehr Pourjozi 的回答，對話框出現了，但包含文字“testb.html”，而不是 testb.html 的內容。
從所有三個答案中得到提示，我讓它作業了。現在我更了解 JQuery 對話框了。
謝謝，所有。
大衛
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343464.html
標籤：javascript html 查询 对话 锚