在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>
相关推荐
专注VB编程开发20年12 小时前
开机自动后台运行,在Windows服务中托管ASP.NET Core
windows·后端·asp.net
圆滚滚肉肉20 小时前
后端MVC(控制器与动作方法的关系)
后端·c#·asp.net·mvc
ajassi200020 小时前
开源 C# .net mvc 开发(六)发送邮件、定时以及CMD编程
linux·开源·c#·mvc
旷世奇才李先生21 小时前
jQuery EasyUI 安装使用教程
前端·jquery·easyui
冰茶_11 天前
ASP.NET Core API文档与测试实战指南
后端·学习·http·ui·c#·asp.net
blackA_11 天前
JavaWeb学习——day8(MVC模式与session、cookie)
学习·mvc
专注VB编程开发20年11 天前
asp.net core Razor动态语言编程代替asp.net .aspx更高级吗?
开发语言·后端·c#·asp.net·.net
保持学习ing11 天前
SpringBoot电脑商城项目--创建订单+统计业务方法耗时
java·spring boot·spring·springmvc·jquery
PHASELESS41112 天前
深入理解Spring MVC:构建灵活Web应用的基石
java·网络·后端·spring·mvc
保持学习ing12 天前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery