在ASP.NET MVC中使用JQuery提供的弹出窗口(模态窗口)

在ASP.NET MVC中使用JQuery提供的弹出窗口(模态窗口)

原理

使用<div>图层灵活显示在浏览器的任何位置。默认情况下指定<div>不可见

引用

  • 样式表

在JQuery的官方网站可以下载对应的css样式表。打开官网的样例页

找到样式表引用路径

html 复制代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

将其下载到本机,其中thme

比如,我的样式表路径为

html 复制代码
<link rel="stylesheet" href="~/lib/jquery/ui/1.11.3/themes/smoothness/jquery-ui.css">
  • JQuery库

下载JQuery和JQuery-ui库,并放置在对应的路径中

html 复制代码
<script src="~/lib/jquery/jquery-1.11.3/jquery-1.11.3.min.js"></script>
<script src="~/lib/jquery/ui/1.11.3/jquery-ui.min.js"></script>

注意:前后顺序

这里要注意,在ASP.NET模板中,_Layout.cshtml文件末尾会引用JQuery.js,将其删除,否则会出现重复引用导致错误

Javascript调用

加入div的定义

html 复制代码
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

加入javascript调用

javascript 复制代码
<script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
</script>
相关推荐
王柏龙8 小时前
aspnetcore Mvc配置选项中的ModelMetadataDetailsProviders
mvc·.netcore
即将进化成人机14 小时前
Spring-----MVC配置和基本原理
java·spring·mvc
王柏龙14 小时前
aspnetcore Mvc配置选项中的ModelBindingMessageProvider
mvc·.net
FreeBuf_1 天前
黄金旋律IAB组织利用暴露的ASP.NET机器密钥实施未授权访问
网络·后端·asp.net
万能小锦鲤3 天前
《Java Web程序设计》实验报告四 Java Script前端应用和表单验证
eclipse·jquery·java web·表单验证·实验报告·java script·java web程序设计
神仙别闹4 天前
基于ASP.NET MVC+SQLite开发的一套(Web)图书管理系统
sqlite·asp.net·mvc
神仙别闹4 天前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
咖丨喱5 天前
【Action帧简要分析】
服务器·数据库·asp.net
发粪的屎壳郎5 天前
ASP.NET Core 8 轻松配置Serilog日志
后端·asp.net·serilog
别来无恙1495 天前
整合Spring、Spring MVC与MyBatis:构建高效Java Web应用
java·spring·mvc