我对此很陌生，甚至不确定我是否在描述我在这里想要完成的事情，但现在就是这样。
我在变量中设置了一个表，我希望它显示在Jquery对话框中，但我只能在刷新时才能显示。单击按钮打开对话框后，有没有办法加载它？
我被卡住了，它开着我的香蕉。
感谢您的反馈。
这是基本代码......
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
<div id="dialog" title="Basic dialog">
<p>#myVariable</p>
</div>
<button id="opener">Open Dialog</button>
............................................... .............
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fli</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://resources/demos/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<style>
.ui-widget-overlay {
background: rgba(0,0,0,0.9);
}
.ui-button {
background-color:#1C2733;
height:60px;
width:200px;
color:white;
border-color:#1C2733;
border-radius:0px;
}
.ui-button:active {
background-color:#0E1F21;
color:white;
}
.ui-button:hover {
background-color:#0E1F21;
border-color:#1C2733;
color:white;
}
.ui-button:link {
background-color:#0E1F21;
color:white;
}
label {
font-size:13px;
}
.button-SD {
background-color: #FF3F00;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width:100%;
border-radius: 4px;
}
.button-SD:hover {
background-color: #FB7005;
color: white;
}
#sd-search-form {
padding: 0 15px;
margin-left: -18px;
}
input[type=text], select {
width: 100%;
padding-left: 15px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
height:30px;
font-size:12px;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}input[type=checkbox] {
font-size: 13px;
}
input[type=radio] {
font-size:13px;
}
input[type=submit]:hover {
background-color: #45a049;
}
option {
font-size: 13px;
}
input {
font-size: 13px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size: 13px;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 13px;
}
:-ms-input-placeholder { /* IE 10+ */
font-size: 13px;
}
:-moz-placeholder { /* Firefox 18- */
font-size: 13px;
}
.ui-dialog {
position: absolute;
height: auto;
top: 62px;
left: 0px;
display: block;
width: 287px;
}
#sdopener {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABZUlEQVQ4jb3TQU7CQBQA0H8Ej+ARuAA34AT2Em5IXDUGCKZthITQCSlmphAaKm1aaAJRNMWFG9gYNtUS2CgutLCBtRkXpAkabYsl/uSvJv/lz/w/ADsEK6qMgNtYwG18ippHu9R+ibykVZBuTweTBR0vKR0vKR1MFhTp9jQvaZWdMJ5Yfdv1Vj70PW3XW/HE6kfuLAjbRiN1emHdP4VhfiLdngVirKgy228WloPJgrKiyvwKcsSUo2J+csSU/w/c+5X3PhQAgFxVwzePbx8R1mYdujbHRXJQUrqj8mWfBqG2661DFzvNSwkeG05v6NCS0h3lqhpGuj374evNQjvbxnhsOCdn5NA/Y0WV4Ygpc8SUQwcAAJBBzWSh1nnxsTQvJUKLgrBi3XrvDR16XuvMY2OodT3vDR1aqFteBjWTf8ay5UbKx1Dr6jUWtulOEYy7B1o1bp9jYwCbfcsgRciWG6nYGAB8As5qVlsy+41jAAAAAElFTkSuQmCC") 50px center no-repeat;
height:60px;
}
#sdopener:hover {
background-color:#0E1F21;
border-color:#1C2733;
color:white;
}
.ui-dialog .ui-resizable-se {
width: 14px;
height: 14px;
right: 3px;
bottom: 3px;
background-position: -80px -224px;
}
</style>
</head>
<body>
<!-- Navigation Buttons Start -->
<div id="menu" style="background-color:#1C2733; width:100%; height:60px; margin-top: -8px; margin-left: -8px; padding-right:16px">
<input name="SDSearchDialogOpener" type="button" class="ui-button ui-widget ui-corner-all" id="sdopener" style="margin-left:-18px" value=" SD Search">
<!-- SD Search Start -->
<div id="sddialog" title="SD Search">
<label for="sdkeyword">Seed Keyword(s):</label>
<input type="text" id="TextBoxKW" placeholder="ie. iphone case" variable="#TextBoxKW">
<br>
<div class="ratings">
<label for="rating">Rating:</label><br>
<input type="radio" id="TwoThumbs" name="Rating" fillwith="checked" variable="#TwoThumbs" />
<span style="font-size: 13px"> 2+ Rating</span><br>
<input type="radio" id="OneThumbs" name="Rating" fillwith="checked" variable="#OneThumbs" />
<span style="font-size: 13px"> 1+ Rating</span><br>
<input type="radio" id="ZeroThumbs" name="Rating" fillwith="checked" variable="#ZeroThumbs" />
<span style="font-size: 13px"> 0 Rating</span><br>
<input type="radio" id="AllThumbs" name="Rating" fillwith="checked" variable="#AllThumbs" />
<span style="font-size: 13px"> All Ratings</span>
</div>
<br>
<label for="price">Price:</label><br>
<input type="text" id="PriceLow" style="width:101px" placeholder="$ min" variable="#PriceLow"> -
<input type="text" id="PriceHigh" style="width:101px" placeholder="$ max" variable="#PriceHigh">
<br>
<select id="DropDownDate" variable="#DropDownDate" style="font-size: 13px">
<option value="Any Time"><span style="font-size: 13px">Any Time</span></option>
<option value="Past Week"><span style="font-size: 13px">Past Week</span></option>
<option value="Past 2 Weeks"><span style="font-size: 13px">Past 2 Weeks</span></option>
</select>
<br>
<input class="button-SD" type="button" value="Search" id="sdopener2" onclick="ubot.runScript('ProductSearch()')" />
</div>
<br>
<br>
<br>
<br>
<br>
<!-- <input class="button ButtonResults ButtonResultsinput" type="button" value="Return to results" id="ButtonResults" style="width:240px; visibility:hidden; height:20px" onclick="ubot.runScript('Back to Search Results()')" /> -->
<div id="sddialog2" title="Search Progress">
<input class="button-SD" type="button" value="View Search Results" id="sdopener3" style="width:300px;" />
</div>
<div id="sddialog3" title="Search Results">
<div>HERE'S WHERE THE TABLE CHART VARIABLE WILL GO</div>
</div>
<!-- SD Search End -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
$("#sdopener").click(function () {
$("#sddialog").dialog("open");
});
$("#sddialog").dialog({
autoOpen: false,
modal: false,
position: [0,61],
width: 289,
height: 642,
open: function (event, ui) {
$(".ui-dialog #sdopener2").click(function () {
$("#sddialog2").dialog("open");
});
}
});
$("#sddialog2").dialog({
autoOpen: false,
modal: true,
width: 335,
height: 250,
open: function (event, ui) {
$(".ui-dialog #sdopener3").click(function () {
$("#sddialog3").dialog("open");
});
}
});
$("#sddialog3").dialog({
autoOpen: false,
modal: false,
position: [298,61],
width: '900',
height: 642,
resizable: true,
handles: "all",
autoHide:true
});
</script>
<body>
</body>
</html>
答案 0 :(得分：0)
为此目的有很多材料，下面的链接为您提供了完整的功能和设计，并提供了一些明确的示例。
试试这个：
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
$("#content").html($("#tables").html());
});
} );
<div id="dialog" title="Basic dialog">
<p id="content">#myVariable</p>
</div>
<button id="opener">Open Dialog</button>
<div style="display: none;" id="tables">
Write here to show in modal...
</div>