使用时需添加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. DevOps之内容分发网络CDN

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <内容分发网络CDN(Content Delivery Network)> 关于虚 ...

  2. Hibernate 学习笔记 - 2

    五.映射一对多关联关系 1. 单向多对一 即 单向 n-1 1)单向 n-1 关联只需从 n 的一端可以访问 1 的一端 ① 域模型: 从 Order 到 Customer 的多对一单向关联需要在Or ...

  3. Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) D. Sorting the Coins

    http://codeforces.com/contest/876/problem/D 题意: 最开始有一串全部由"O"组成的字符串,现在给出n个数字,指的是每次把位置n上的&qu ...

  4. 【特效】hover向上翻转效果

    前段时间做了很多有关css3动画的项目.虽然当时都较圆满的完成了,但事后还是要总结一下的,趁着近期工作不忙,系统的学习了一些动画理论,重点看了transform3D变换,学习了translate平移. ...

  5. MongoDB快速入门

    http://www.yiibai.com/mongodb/mongodb_quick_guide.html 创建数据库 MongoDB use DATABASE_NAME 用于创建数据库.该命令如果 ...

  6. 【node】使用nvm管理node版本

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你想快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来安 ...

  7. Python学习笔记（七）

    Python学习笔记(七): 深浅拷贝 Set-集合 函数 1. 深浅拷贝 1. 浅拷贝-多层嵌套只拷贝第一层 a = [[1,2],3,4] b = a.copy() print(b) # 结果:[ ...

  8. C 数组使用时注意点

    数组注意点: 数组为静态时,初始化长度必为常量表达式 数组长度由最后一个元素决定其长度,可以指定特定元素,如: int arr[] = {0, 1, [5]=5, 6}; 没有提供初始值的元素赋值为0 ...

  9. JavaScript判断变量数据类型

    一.JS中的数据类型 1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) ...

  10. Lua与javascript的差异

    Lua与javascript的差异 2010-03-08 Lua模拟器js方案 1.语法级模拟 lua与js语言差异 1.1注释 js 为//,lua为--. 1.2变量 js利用var来声明全局变量 ...