使用时需添加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. dotweb框架之旅 [二] - 常用对象-App(dotweb)

    dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...

  2. 初学者易上手的SSH-struts2 02Action获取表单数据-通配符

    在上一章中,我们已经搭建好了struts2的一个开发环境,那么这一章就来做一个简单的登录功能,以及介绍和使用struts2里面一个重要的东西-通配符. 第一步,在WebContent下面新建一个log ...

  3. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  4. ASP.NET Core 认证与授权[3]:OAuth & OpenID Connect认证

    在上一章中,我们了解到,Cookie认证是一种本地认证方式,通常认证与授权都在同一个服务中,也可以使用Cookie共享的方式分开部署,但局限性较大,而如今随着微服务的流行,更加偏向于将以前的单体应用拆 ...

  5. javascript面向对象的写法及jQuery面向对象的写法

    文章由来:jQuery源码学习时的总结 在JS中,一般的面向对象的写法如下: function Cao(){}//定义一个构造函数 Cao.prototype.init = function(){}/ ...

  6. Ubuntu14.04LTS下安装Node.js&NPM以及个人博客hexo的初始化配置

    什么是hexo Hexo 是一款基于node 的静态博客网站生成器作者 :tommy351是一个台湾的在校大学生...相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Oct ...

  7. mybatis返回int类型报null

    解决这个问题,是当查出来为NULL时,结一个默认值,如:0. MySQL: SELECT IFNULL(MAX(id),0)AS sort FROM table Oracle: SELECT nvl( ...

  8. Azure环境中Nginx高可用性和部署架构设计

    前几篇文章介绍了Nginx的应用.动态路由.配置.在实际生产环境部署时,我们需要同时考虑Nginx的高可用性和部署架构. Nginx自身不支持集群以保证自身的高可用性,商业版本的Nginx+推荐: T ...

  9. LeetCode 88. Merge Sorted Array（合并有序数组）

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  10. IntentService学习

    IntentService是一个Service,主要就是Service和HandlerThread的结合 一.使用 不用多说和使用Service差不多,但是比Service多个一个方法实现: publ ...