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

这篇具有很好参考价值的文章主要介绍了在ASP.NET MVC中使用JQuery提供的弹出窗口(模态窗口)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

原理

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

引用

  • 样式表

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

找到样式表引用路径

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

将其下载到本机,其中thme

比如,我的样式表路径为

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

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

<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的定义

<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 &apos;x&apos; icon.</p>
</div>

加入javascript调用文章来源地址https://www.toymoban.com/news/detail-791503.html

<script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
</script>

到了这里,关于在ASP.NET MVC中使用JQuery提供的弹出窗口(模态窗口)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【ASP.NET MVC】使用动软(一)(9)

    前文为解决数据库操作设计的  TestMysql  类,仅简单地封装了一个Query函数,代码如下: 很显然,一个函数去解决所有数据库中所有表的描述、操作,肯定是远远不够,即使完成系统功能也会使代码非常复杂。因此需要封装更多的功能。 ORM 是 Object Relational Mapping 的缩写。意

    2024年02月14日
    浏览(37)
  • 【ASP.NET MVC】使用动软(二)(10)

    按前文添加动态到工程 双击动软 完成新建数据库服务器后 ,需要关闭重新打开 选择简单三层,注意保存位置 注意切换数据库: 生成后拷贝五个文件夹到工程目录 注意目录结构: 添加四个项目到原来的工程: 右键项目-》添加-》现有的项目,一个个添加到工程: 添加引用

    2024年02月14日
    浏览(34)
  • 【ASP.NET MVC】使用动软(四)(12)

    需解决的问题: 网站登录往往需要用户名+密码验证,为避免重复验证,一般采用Cookie 、Session等技术来保持用户的登录状态: Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中; Cookie是客户端保存用户信息的一种机制,

    2024年02月14日
    浏览(41)
  • Asp.Net MVC 使用Log4Net

    在 ASP.NET MVC 中使用 Log4net 需要进行一些配置和代码集成。下面是在 ASP.NET MVC 中使用 Log4net 的步骤: 打开 NuGet 包管理器控制台,并运行以下命令来安装 Log4net: 在你的 ASP.NET MVC 项目中,创建一个名为 log4net.config 的文件(或者其他名称,只要后缀是 .config 即可),用于配置

    2024年02月15日
    浏览(31)
  • ASP.NET Core MVC 使用 JWT 的示例

    创建一个 ASP.NET Core MVC 项目。 添加 NuGet 包: Microsoft.AspNetCore.Authentication.JwtBearer:用于支持 JWT 的身份验证。 System.IdentityModel.Tokens.Jwt:用于生成和验证 JWT。 在 Startup.cs 文件中做如下修改: 请注意,在上述代码中,您需要将以下参数替换为实际的值: \\\"your_issuer\\\" :发行者的标

    2024年02月13日
    浏览(40)
  • 界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤

    Telerik UI for ASP. NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验。它主要是针对专业级的 ASP.NET开发,通过该产品的强大功能,开发者可以开发出功能丰富、适应标准广泛的响应式应用程序。 在

    2023年04月13日
    浏览(41)
  • nssm 工具把asp.net core mvc变成 windows服务,使用nginx反向代理访问

    nssm工具的作用:把项目部署成Windows服务,可以在系统后台运行 1.创建一个asp.net core mvc的项目weblication1 asp.net core mvc项目要成为windows服务需要安装下面的nuget包 在program中添加代码 在创建一个asp.net core mvc项目 webapplication2 把program中的usePathBase改为(“/app2”) 我这里没添加 buil

    2024年04月09日
    浏览(42)
  • ASP.NET Core MVC -- 将视图添加到 ASP.NET Core MVC 应用

    右键单击“视图”文件夹,然后单击“添加”“新文件夹”,并将文件夹命名为“HelloWorld”。 右键单击“Views/HelloWorld”文件夹,然后单击“添加”“新项”。 在“添加新项 - MvcMovie”对话框中: 在右上角的搜索框中,输入“视图” 选择“Razor 视图 - 空” 保持“名称”框的

    2024年02月13日
    浏览(85)
  • ASP.NET MVC - 安全

    为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序。 第 8 部分:添加安全。 Models 文件夹 包含表示应用程序模型的类。 Visual Web Developer 自动创建  AccountModels.cs  文件,该文件包含用于应用程序认证的模型。 AccountModels  包含  LogOnModel 、 ChangePasswordModel  和  RegisterModel :

    2024年02月21日
    浏览(35)
  • DevExpress DXperience Crack Blazor, ASP.NET, ASP.NET MVC

    DevExpress DXperience helps you build applications for Windows, Web, mobile and tablet with all of the DevExpress single platform controls and more. The DevExpress DXperience Subscription includes hundreds of Desktop UI Controls (WinForms, WPF and Desktop Reporting), Web UI Controls (Blazor, ASP.NET, ASP.NET MVC and Core, Bootstrap Web Forms, JavaScript - jQ

    2024年04月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包