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中添加以下引用:
接着定义好一段html代码,这就是你想显示出来的内容,例如
Search page
Name: (Name field is blank will get all users.)
Active:
这是一段显示搜索对话框的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("");
}
});
}
构建代码完成后我们还需要初始化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了。
例如: