Bootstrap模态框(MVC)

BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框。本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习。BZ在这里谢过各位。

首先要在页面加上一个点击事件:

@Html.ActionLink("预览","",null, new { onclick = "dianji('" + item.TypeCode + "')" });

接下来我们需要写一段JS:

<script type="text/javascript">
function dianji(obj)
{
debugger;
window.showModalDialog("/Type/May?TypeCode="+obj,null,"dialogWidth:400px;dialogHeight:500px;status:no;help:no;resizable:yes;");
}
</script>

PS:BZ写的是带有参数的事件,其中showModalDialog有三个参数,第一个是URL,第二个是要往模态框穿的数据(如果没有要传的参数就写为null,否则会影响第三参数的正常显示),第三个是所弹出的模态框的样式。

之后就是我们的模态框,需要两个引用文件:

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="~/Content/View/js/bootstrap-treeview.js"></script>
<script type="text/javascript">
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus();
})
</script>

BZ所说的模态框是根据Bootstrap框架提供的!!!

附上Bootstrap模态框Modal插件地址:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

非常感谢各位观看本博客,BZ希望和更多的小菜一起成长,同样也希望大神们提出建议。如果有不足之处还望各位不吝赐教!再次感谢各位!

上一篇:SpringBoot服务间使用自签名证书实现https双向认证


下一篇:部署自建CA颁发证书实现https加密