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" οnclick="gridReload2();" class="close" />
<input type="button" οnclick="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("");
}
});
}
构建代码完成后我们还需要初始化open和close的初始化代码,这样才能够方便你之后的调用,代码如下:
$('.close').click(function () {
$('#yesno').overlay().close();
});
$("#searchButton").click(function () {
$("#mysearch").overlay().load();
});
这里需要感谢论坛朋友的帮助,之前在做的时候遇到了问题,有兴趣可以看看此帖:
这里是凡是样式为close的按钮点击未关闭(id不适用,因为你很可能需要多个关闭按钮,为每一个关闭按钮设置这一段代码是不优雅的),而打开的话只能是searchbutton了。
例如:
<button class='close'>close</button>