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>
View Code

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>
View Code

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

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM