在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调用

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

原文地址：https://blog.csdn.net/JimFire/article/details/135458804

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！