ASP.NET MVC 3程序(二)： 如何使用JQuery插件Overlay
   在上一篇文章的基础上我们建立好一个基于JQgrid的列表（http://blog.csdn.net/aa466564931/article/details/8002972）之后，我们有可能需要使用到一些自定义的功能，例如需要查看某一条数据的详细信息（列表上不方便全部列举出来），这时候很可能需要跳出一个自定义的页面来做到这一点。这里我们继续看另外一个JQuery的插件Overlay，如果你还没有听说过这个插件，可以看看篇文章（包含很多的code和Demo，建议多试试）：

http://jquerytools.org/documentation/overlay/index.html

当然我们还有很多方法的来做到这一点，比如自己写一段JS脚本，抑或使用Ajax控件，比如基于UserControl的ModalPopupExtender（http://blog.csdn.net/aa466564931/article/details/6704802），但是MVC程序中最为推荐的还是JQuery，而且使用JQuery的插件能够帮助我们需要更少的coding量，另外它也是开源的，我们可以从中得到更多的优势。

 

Overlay的很多style都是被锁定了的，例如你需要一个关闭overlay的按钮的时候只需要在按钮上定义好class=“close”就可以达到关闭的效果了，其他都在Overlay的都会帮你做好, 但是通常我们的美工是帮我们定义好了样式的，所以很可能会需要自己定义样式名称来关闭Overlay，这又怎么实现呢？ 来看一个实例吧。

首先你需要在layout.cshtml中添加以下引用：

 

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>

接着定义好一段html代码，这就是你想显示出来的内容，例如

<div id="mysearch" class="yesno">
<div class="modal">
<h3>Search page</h3>
<p>Name:<input type="text" id="name" /> (Name field is blank will get all users.)</p>
<p>Active:
<select id="active">
<option selected="selected" value="1">Y</option>
<option value="0">N</option>
</select>
</p>
<p>
<input type="button" value="query" onclick="gridReload2();" class="close" />
<input type="button" onclick="test1();" value="close" class="close" />
</p>
</div>
</div>

 

这是一段显示搜索对话框的html，可以根据JQgrid的列来进行搜索，更快查找到信息。接着我们需要初始化Overlay，确定overlay的样式，大小，透明度等属性。

    $(document).ready(function () {
        $("#mysearch").overlay({
            mask: {

                // you might also consider a "transparent" color for the mask
                color: '#fff',

                // load mask a little faster
                loadSpeed: 200,

                // very transparent
                opacity: 0.5
            },
            closeOnClick: false,
            onBeforeClose: function () {
               // $('#pluginin').html("");
            }

        });
    }

 

mySearch即div的id， mask是需要遮蔽的属性，当然你还可以实现一些Overlay特用的时间，例如这里的onBeforeCloase, 注视掉的代码是清空某一个div内的值，因为当你调用Overlay的close事件时，他不会清空掉你的内容，只是隐藏起来，当你在需要在关闭时候清除掉这些数据的时候那么就可以通过这个方式来达到。

构建代码完成后我们还需要初始化open和close的初始化代码，这样才能够方便你之后的调用，代码如下：

        $('.close').click(function () {
            $('#yesno').overlay().close();
        });

        $("#searchButton").click(function () {
            $("#mysearch").overlay().load();
        });

 

这里需要感谢论坛朋友的帮助，之前在做的时候遇到了问题，有兴趣可以看看此帖：

http://topic.csdn.net/u/20120913/18/fbe2eb87-13df-4600-a547-51999a420c5d.html?seed=550307558&r=79671009#r_79671009

这里是凡是样式为close的按钮点击未关闭（id不适用，因为你很可能需要多个关闭按钮，为每一个关闭按钮设置这一段代码是不优雅的），而打开的话只能是searchbutton了。

 例如：

<button  class='close'>close</button>

 

当然这样做也会带来一个问题，是什么问题呢？下一篇文章我再来继续介绍。

1楼aa466564931昨天 15:50

：）