使用时需添加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. Re-Order Buffer

    Re-order Buffer(ROB)是处理器中非常重要的一个模块,它位于renamer与scheduler(RS)之间,并且也是execution unit(EU)的出口.ROB作为指令处理的后端 ...

  2. VS中Release模式下生成去掉生成pdb文件

    1.右键项目,选择属性 2.选择正确的配置,点击高级 3.调试信息选择 none,点击确定.

  3. Eratosthenes,筛法求素数

    //筛法求区间[0,n]的所有素数,v为素数表 //v[i]==0,i为素数 void f(int n) { int m=sqrt(n+0.5); memset(v,,sizeof(v)); ;i&l ...

  4. shell script测试命令（test)

    shell script测试命令(test) test命令 检查系统上面某些文件或者相关的属性 常用选项 test -e :检查该文件名是否存在 例:检查/dmtsai是否存在 [root@local ...

  5. APP在模拟器崩溃，提示__gcd_queue_item_enqueue_hook_block_invoke

    libBacktraceRecording.dylib`__gcd_queue_item_enqueue_hook_block_invoke: libBacktraceRecording.dylib` ...

  6. web前端——10个妨碍进步的学习方式

    1.前言 从事web前端的人很多,每个人的学习方式,学习习惯基本不会一模一样!关于web前端(或者直接互联网),大家都知道,是做到老,学到老的一个行业.之前写文章的时候,我说过很多学习的方式和建议.今 ...

  7. （转）UML类图与类的关系详解

    转载自:http://www.uml.org.cn/oobject/201104212.asp 在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Rea ...

  8. Promise对象解读

    首先强调的是"Promise"是对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操 ...

  9. 顺序栈--Java实现

    /*栈和队列:逻辑结构属于操作受限的线性表 *栈:特点先进后出,只允许在栈顶操作 *栈的实现方式:顺序栈和链栈 *常见的操作:进栈,出栈,获取栈顶,判空,判满,栈的容量 *栈的应用 *1.逆序相关操作 ...

  10. 聊聊Java的字节码

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 巴山楚水凄凉地,二十三年弃置身.怀旧空吟闻笛赋,到乡翻似烂柯人.沉舟侧畔千帆过,病树前头万木春 ...