Bootstrap模态框（MVC）

时间：2023-11-25 18:58:08

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希望和更多的小菜一起成长，同样也希望大神们提出建议。如果有不足之处还望各位不吝赐教！再次感谢各位！

相关文章