在ASP.NET MVC中显示jQuery UI Dialog Box,可以按照以下步骤进行:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="openDialog">打开Dialog Box</button>
<div id="dialog" style="display: none;">
<p>这是Dialog Box的内容。</p>
</div>
<script>
$(document).ready(function() {
$("#openDialog").click(function() {
$("#dialog").dialog({
modal: true, // 设置为模态对话框,禁止用户操作其他页面元素
title: "Dialog Box 标题", // 设置Dialog Box的标题
width: 400, // 设置Dialog Box的宽度
height: 200, // 设置Dialog Box的高度
buttons: {
"确定": function() {
$(this).dialog("close"); // 点击确定按钮后关闭Dialog Box
}
}
});
});
});
</script>
以上代码中,通过$("#openDialog").click()
函数来监听按钮的点击事件,当按钮被点击时,调用$("#dialog").dialog()
函数来初始化Dialog Box,并设置相关属性。其中,modal
属性设置为true
表示Dialog Box为模态对话框,禁止用户操作其他页面元素;title
属性设置Dialog Box的标题;width
和height
属性分别设置Dialog Box的宽度和高度;buttons
属性用于设置Dialog Box的按钮,这里只设置了一个"确定"按钮,并在点击按钮后关闭Dialog Box。
通过以上步骤,你就可以在ASP.NET MVC中显示一个基本的jQuery UI Dialog Box了。如果需要更多的自定义和功能,可以参考jQuery UI官方文档:https://jqueryui.com/dialog/。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云