在HTML中使用jQuery Dialog调用没有DIV的情况，可以通过以下步骤实现：
（图片来源网络，侵删）
1、引入jQuery库和jQuery UI库。
2、创建一个按钮，点击时触发jQuery Dialog。
3、在jQuery Dialog中添加内容，包括标题、表格等。
4、使用CSS样式美化对话框。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<style>
.dialogcontent {
maxwidth: 500px;
margin: 0 auto;
}
table {
width: 100%;
bordercollapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
textalign: left;
}
th {
backgroundcolor: #f2f2f2;
}
</style>
</head>
<body>
<button id="opendialog">打开对话框</button>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jqueryui.js"></script>
<script>
$(function() {
$("#opendialog").click(function() {
$("<div>")
.addClass("dialogcontent")
.html("<h2>标题</h2><table><tr><th>列1</th><th>列2</th></tr><tr><td>数据1</td><td>数据2</td></tr></table>")
.dialog({
modal: true,
close: function() {
$(this).remove();
}
});
});
});
</script>
</body>
</html>
在这个示例中，我们创建了一个按钮，当点击该按钮时，会弹出一个包含标题和表格的对话框，对话框使用了自定义的CSS样式进行美化。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/476094.html
微信扫一扫