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

  • 相关阅读:
    HTML5 浏览器设定
    c语言运算符优先级
    Jquery选择器
    asp.net中的<% %>用法
    Jquery技巧
    css选择器
    HTML5 Canvas 参考手册
    具有滑动效果的导航代码
    委托
    kubernetes 1.6 集群实践 (十)
  • 原文地址:https://www.cnblogs.com/A-aron/p/5779401.html
Copyright © 2011-2022 走看看