使用时需添加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. 学习笔记之08试用div做网页（滨院）-小作业

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. IDEA Maven 三层架构 2、运行 springMVC

    运行 SpringMVC 首先要理解 SpringMVC 应用程序的入口是配置文件 web.xml,其路径为"src/main/webapp/WEB-INF/web.xml",通过 ...

  3. python 中的enumerate（）函数的用法

    enumerate函数说明: 函数语法:enumerate(可遍历的对象,索引号开始的值).enumerate(sequence, [start=0]) 功能:将可循环序列sequence以start ...

  4. WAMPServer配置修改及问题汇总

    备忘录 软件版本wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b -------------------------------------- ...

  5. vim-ultisnips补全功能失效，无法识别解决办法

    昨天又给vim配了一堆插件 发现了一个这个问题,vim的ultisnips插件不能用了! 首先,我先查看插件是否正常运行了 :script 从一堆正在运行插件里找到ultisnips的名字,说明插件正 ...

  6. 【Java学习笔记之三十四】超详解Java多线程基础

    前言 多线程并发编程是Java编程中重要的一块内容,也是面试重点覆盖区域,所以学好多线程并发编程对我们来说极其重要,下面跟我一起开启本次的学习之旅吧. 正文 线程与进程 1 线程:进程中负责程序执行的 ...

  7. Visual Studio中让一个JS文件智能提示另一个JS文件中的成员

    当一个Web页面引用了两个JS文件(假如分别叫common.js和JScript1.js),如果JScript1.js中需要调用大量的common.js中的方法,这时候在JScript1.js中智能提 ...

  8. Asp.net MVC4高级编程学习笔记-模型学习第四课基架与模型绑定20171027

    MVC模型 一.构建基架. MVC中的基架可以为应用程序提供CURD各种功能生成所需要的样板代码.在添加控制器的时候可以选择相应的模板以及实体对象来生成相应的模板代码. 首先定义一个模型类如下所示: ...

  9. quartz 定时任务

    面试问到了,回答的不是很全面,丢人呀.研究过,用过的东西. 2年多没用,回忆一下: Quartz任务调度框架和Spring集成使用:定时执行一些任务 核心:调度器.任务和触发器. 调度器负责调度各个任 ...

  10. Oracle存储过程跨用户执行查询报错

    在Oracle中,在USERA下编写一个存储过程,该存储过程中引用了另一个用户USERB下的表或视图对象.编译该存储过程,出现编译错误.报ORA-00942: table or view does n ...