Modal(模态框)

首先,外引boostrap和Jquery的文件环境:

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

一般是按钮或者链接触发modal

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->

首先添加一个大的div,   fade:淡入淡出的效果  aria-hidden是为了隐藏模态框

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

然后在modal-content下,插入modal-header,modal-body,modal-footer

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->

&times;就是X的符号,点击关闭或者x或者点“Ese”都可以退出模态框

如果,你想点击提交更改也可以退出模态框,你可以添加一个onclick事件,在script里添加$("#myModal").modal("hide");如下

<button type="button" class="btn btn-primary" onclick="user_del()" id="user-change">提交更改</button>
 function user_del(){
$("#user").modal('hide');
}

以上就是退出功能问题,至于弹出的模态框,可以在modal-body里写入一系列的form-group,输入框组,详情进入boostrap的官网查看输入框组的学习即可,代码效果如下:

关于boostrap的modal隐藏问题(前端框架)的更多相关文章

  1. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  2. 整合X-Admin前端框架改造ABP

    “站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...

  3. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

  4. Semantic-UI和其他几个前端框架

    本来是想介绍Semantic-UI的,但如果只介绍这个框架,没什么内容,框架相关feature站点上有不需要说,所以干脆列出自己常用的几个前端框架,算是做个阶段性总结. 本文的核心是侧重于HTML/C ...

  5. b2c项目基础架构分析(二)前端框架 以及补漏的第一篇名词解释

    继续上篇,上篇里忘记了也很重要的前端部分,今天的网站基本上是以一个启示页,然后少量的整页切换,大量的浏览器后台调用web服务局部.动态更新页面显示状态这种方式在运作的,从若干年前简单的ajax流行起来 ...

  6. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  7. 简洁灵活的前端框架------BootStrap

      前  言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...

  8. 移动HTNL5前端框架—MUI

      前  言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...

  9. vue 前端框架

    什么是vue.js 1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 2. ...

随机推荐

  1. 对.NET Core未来发展趋势的浅层判断

    经常听到园里.NET开发人员在抱怨生态不如JAVA,想要转JAVA,所谓打不过你,我就加入你!杜兰特的思维方式固然是获取总冠军的一种方式,但是我们要关起门来问自己有没有杜兰特的实力. 用开发生态来类比 ...

  2. SQL过滤字符后手工注入漏洞测试(第1题)

    https://www.mozhe.cn/bug/detail/a1diUUZsa3ByMkgrZnpjcWZOYVEyUT09bW96aGUmozhe 分析题目,属于时间盲注,这种情况,通常使用sq ...

  3. 我们是如何通过全球第一免费开源ERP Odoo做到项目100%交付

    传统友商ERP的交付过程 一.先初步需求调研,后选型功能模块 传统友商ERP第一件事情先对客户方进行初步的调研,客户方无论说什么,友商听过算过,只关心你人数多少,有哪些人涉及到哪些模块,接着对模块进行 ...

  4. mysql 服务【安装】【启动】【停止】【卸载】【重置密码】

    windows安装:一.一机安装多个服务时,重复步骤,修改服务名即可: 1.mysqld install mysql_12336 --defaults-file="MYSQL_HOME\my ...

  5. 向MIP开源项目提交Issues

    Issues 是 GitHub 管理需求,讨论技术方案的方式,附:官方解释.MIP 是在 GitHub 上的开源项目,也使用 Issues 来做任务管理. 一.Issues 在 MIP 项目中的应用 ...

  6. Java核心技术第四章——3.对象构造

    重载: 如果多个方法(包含构造方法)有相同的名字.不同的参数,便产生重载.编译器必须挑选出具体执行哪个方法,它通过用各个方法给出的参数类型与特定方法调用所使用的值类型进行匹配挑选出相对应的方法. 如果 ...

  7. 爬虫须知的HTTP协议

    HTTP请求: 1.HTTP请求主要分为"Get"和"Post"两种方法. 2.当我们在浏览器输入URL http://www.baidu.com 的时候, 浏 ...

  8. Go语言strings包

    目录 strings包实现了用于操作字符的简单函数. func EqualFold 判断两个utf-8编码字符串(将unicode大写.小写.标题三种格式字符视为相同)是否相同. func Equal ...

  9. Google 工程师:为什么 CDN 对移动客户端加速“没有”效果

    王者荣耀是近两年来比较火的手游,不少小伙伴都有玩过.玩这个游戏最怕的不是遇到猪一般的队友,也不是怕遇到神一样的对手.最让我们感到害怕和绝望的是,团战爆发时,而你 460 了.460 是一个玩家常用的词 ...

  10. Vue.js-01:第一章 - 一些基础概念

    一.前言 Vue.React.Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的概念. 学习系列目录地址:http ...