使用时需添加bootstrap的引用,否则实现不出来效果

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

注意此处的引用顺序

<link href="~/css/bootstrap.min.css" rel="stylesheet" />

    <script src="~/js/jquery.min.js"></script>

    <script src="~/js/bootstrap.min.js"></script>

这里使用ajax做的登录

<script>

        function submita() {

                $.ajax({

                    type: 'post',

                    datatype: 'json',

                    url: '/Home/Login',

                    data: {

                        Email: $('#txtemail').val(),

                        Pwd: $('#txtpwd').val()

                    },

                    success: function (data) {

                        if (data > ) {

                            alert('登录成功');

                                var m = document.getElementById("d");

                                m.innerHTML = "<div style='float:right' id='d'><ul class='nav navbar-nav'><li class='dropdown active'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>sa<b class='caret'></b></a><ul class='dropdown-menu'><li><a href='#'>设置</a></li><li><a href='/Home/zhuxiao'>退出</a></li></ul></li></ul></div>";

                            $("#myModal").modal("hide");

                        }

                        else {

                            alert('登录失败');

                        }

                    },

                    error: function (err) {

                        alert('错误')

                    }

                })

            }

    </script>

<style>
        .navbar{
            color:white
        }
    </style>
</head>
<body>
  导航中点击登录按钮

 <nav class="navbar navbar-default" role="navigation" style="

       <div class="navbar-header">

           <a class="navbar-brand" href="#" style="margin-bottom:20px;">

               <img src="~/logo-transparent.png" />

           </a>

       </div>

       <div>

           <ul class="nav navbar-nav">

               <li class="dropdown">

                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">课程<b class="caret"></b></a>

                   <ul class="dropdown-menu">

                       <li><a href="#">全部课程</a></li>

                       <li><a href="#">学习路径</a></li>

                   </ul>

               </li>

               <li >

                   <a href="#">问答</a>

               </li>

               <li><a href="#">训练营</a></li>

               <li><a href="#">会员</a></li>

           </ul>

           <div style="float:right; position:absolute;right:0;top:15px;" id="d">

               <a class="btn" data-toggle="modal" data-target="#myModal">登录</a>

               <a>注册</a>

           </div>

       </div>

   </nav>

模态代码

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <h4 class="modal-title" style="text-align:center" id="myModalLabel">

                    登录

                </h4>

                <div class="modal-header">

                    <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">

                        &times;

                    </button>

                </div>

                <form>

                    <div class="modal-body" style="text-align:center">

                        邮箱:

                        <input type="email" id="txtemail" required /><br />

                        密码:<input type="password" id="txtpwd" required />

                    </div>

                    <div class="modal-footer" style="text-align:center">

                        <input type="submit" onclick="submita(); return false;" id="btn" class="btn btn-primary">

                    </div>

                </form>

            </div>

        </div>

    </div>

</body>
</html>
效果图

bootstrap的模态简单案例的更多相关文章

  1. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  2. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  3. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

  4. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  5. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  6. [Design Pattern] Front Controller Pattern 简单案例

    Front Controller Pattern, 即前端控制器模式,用于集中化用户请求,使得所有请求都经过同一个前端控制器处理,处理内容有身份验证.权限验证.记录和追踪请求等,处理后再交由分发器把请 ...

  7. [Design Pattern] Observer Pattern 简单案例

    Observer Pattern,即观察者模式,当存在一对多关系,例如一个对象一有变动,就要自动通知被依赖的全部对象得场景,属于行为类的设计模式. 下面是一个观察者模式的简单案例. Observer ...

  8. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  9. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

随机推荐

  1. Linux硬链接和软连接详解

    硬链接: 硬链接是通过索引节点inode来进行链接的(关于inode,http://www.cnblogs.com/ZGreMount/p/7653307.html).在Linux(ext2,ext3 ...

  2. PHP开发要点与技巧总结(一)

    Opcache:Opcache 来源于Zend Optimizer+改名,主要作用是通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是省去了每次加载 ...

  3. banner幻灯片

    emmm本来想用js写的,但是感觉难就换了jquery. 1.把图片的位置.透明度.宽高.z-index信息用数组datas保存起来,移动的时候直接把位置等信息赋值给li. 2.点击next,即显示下 ...

  4. Anroid四大组件service之本地服务

    服务是Android四大组件之一,与Activity一样,代表可执行程序.但Service不像Activity有可操作的用户界面,它是一直在后台运行.用通俗易懂点的话来说: 如果某个应用要在运行时向用 ...

  5. 解读python中SocketServer源码

    在看SocketServer源码之前,先看一个例子: class Base(object): def __init__(self, name): self.name = name self.Testf ...

  6. C# post提交

    WebForm 前台 <asp:Button ID="Button1" runat="server" Text="Button" On ...

  7. 薪资那么高的Web前端，你该怎么学？

    由于前端开发的火热和一些IT巨头公司 对 web前端开发人员的需求旺盛,让越来越多的人转入前端.前端开发领域 是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域,今天就来聊聊前端到底 ...

  8. 关于python如果没有numpy模块如何处理

    1.在python中,你在python的shell输入>>>import numpy 但是编译器告诉你没有numpy库,这时候你就要导入python库,那么如何导入呢 2.收下访问h ...

  9. LINUX 笔记-ln 命令

    给文件创建软链接 命令:ln -s log2013.log link2013 给文件创建硬链接 命令:ln log2013.log ln2013

  10. excel中添加拼接行

    Sub 万途标签()Dim iFor i = 1 To Sheets.Count    If Sheets(i).Name = "数据表" Then        If MsgBo ...