jquery simplemodel插件和MVC

我假设您正在谈论的是在 http://www.ericmmartin.com/projects/simplemodal/ 而且您已经有了一个基本的ASP.NET MVC应用程序设置。

我要看看你怎么能得到 基本模式对话框 示例工作。

将插件文件放入ASP.NET MVC应用程序

1. 从上面链接的demos链接下载示例并解压缩。
2. 将basic.css和basic_ie.css文件复制到ASP.NET MVC应用程序的内容文件夹中。
3. 同时将img文件夹复制到ASP.NET MVC应用程序的内容文件夹中。
4. 最后,将JS文件夹中的javascript文件复制到ASP.NET MVC应用程序的scripts文件夹中。

引用应用程序中的样式表和javascript文件

在“视图\共享”下打开网站.master文件,并将下面的代码粘贴到 </head> 标签

<link type='text/css' href='../../Content/basic.css' rel='stylesheet' media='screen' />
<!-- IE 6 "fixes" -->
<!--[if lt IE 7]>
<link type='text/css' href='../../Content/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->

<script type='text/javascript' src='../../Scripts/jquery.js'></script>
<script type='text/javascript' src='../../Scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='../../Scripts/basic.js'></script>

最后,调用视图中的对话框

例如,在index.aspx中,可以粘贴以下代码:

<div id='basic-modal'><h2>Basic Modal Dialog</h2>
<p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>
</div>

<div id="basic-modal-content">
        <h3>Basic Modal Dialog</h3>
        <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
        <p>Examples:</p>
        <p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
        <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
        <p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>

        <p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>

希望有帮助。

马里奇