在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>
相关推荐
Cyan_RA91 天前
SpringMVC @RequestMapping的使用演示和细节 详解
java·开发语言·后端·spring·mvc·ssm·springmvc
不要再敲了1 天前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
智商偏低2 天前
ASP.NET Core 中的简单授权
后端·asp.net
周杰伦fans4 天前
.net core webapi/mvc阿里云服务器部署 - 错误解决
阿里云·mvc·.netcore
BFT白芙堂4 天前
GRASP 实验室研究 论文解读 | 机器人交互:基于神经网络引导变分推理的快速失配估计
人工智能·神经网络·机器学习·mvc·人机交互·科研教育机器人·具身智能平台
是萝卜干呀5 天前
IIS 部署 asp.net core 项目时,出现500.19、500.31问题的解决方案
后端·iis·asp.net·hosting bundle
William_cl5 天前
MVC 中 AJAX 与前后端交互深度实战(含独家避坑与场景化方案)
ajax·mvc·交互
joan_855 天前
jquery在文心智能体平台使用API方式部署智能体-AI客服
前端·人工智能·ai·jquery
Cyan_RA96 天前
SpringMVC 执行流程分析 详解(图解SpringMVC执行流程)
java·人工智能·后端·spring·mvc·ssm·springmvc
携欢6 天前
PortSwigger靶场之DOM XSS in jQuery selector sink using a hashchange event通关秘籍
前端·jquery·xss