在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>
相关推荐
William_cl2 天前
一、前置基础(MVC学习前提)_核心特性_【C# 泛型入门】为什么说 List<T>是程序员的 “万能收纳盒“?避坑指南在此
学习·c#·mvc
合作小小程序员小小店2 天前
Web渗透之身份认证与访问控制缺陷(越权(水平垂直),访问控制(没有验证),脆弱验证(Cookie,JWT,Session等))
安全·web安全·网络安全·asp.net·网络攻击模型
.NET修仙日记2 天前
jQuery面试题精选:从基础到高级
前端·javascript·jquery
.生产的驴2 天前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
程序员小凯2 天前
Spring MVC 分布式事务与数据一致性教程
分布式·spring·mvc
FuckPatience3 天前
HTTP Error 5OO.0- ASPNET Core lIS hosting failure (in-process)
asp.net
艾菜籽3 天前
SpringMVC练习:加法计算器与登录
java·spring boot·spring·mvc
程序员小凯3 天前
Spring MVC 多租户架构与数据隔离教程
spring·架构·mvc
艾菜籽4 天前
Spring Web MVC入门补充1
java·后端·spring·mvc
艾菜籽4 天前
Spring MVC入门补充2
java·spring·mvc