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. Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图

    本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上.主要是根据相应的 API 凭借 html 字符串 1.t ...

  2. 使用OSG创建一个简单的地形

    目录 1.解决方案 1) 使用TIF格式的DEM 2) 描述HeightField 2.存在问题 3.参考文档 1.解决方案 在网上参考了一些资料,使用OSG创建地形最简单的办法就是使用OSG::He ...

  3. Android之Realm详解

    文章大纲 一.Realm介绍二.Realm实战三.Realm官方文档四.项目源码下载五.参考文章   一.Realm介绍 1. 什么是Realm   Realm 是一个手机数据库,是用来替代 SQli ...

  4. 在github上fork项目如何同步并解决冲突

    在github上fork项目如何同步并解决冲突 在github上有些项目我们可能会进行一些自己功能的添加但是提交PR后作者基于设计或者其他原因考虑没有通过,但是这个功能又是我们必须的.这时我们就想自己 ...

  5. Sql Server 本地(客户端)连接服务器端操作

    网有很多相关内容,我在此做记录和总结 1.主要是sql server 配置管理工具的配置 在此参考 https://www.cnblogs.com/yougmi/p/4616273.html(再次感谢 ...

  6. mysql建数据库的字符集与排序规则

    1.字符集说明: 一般选择utf8.下面介绍一下utf8与utfmb4的区别. utf8mb4兼容utf8,且比utf8能表示更多的字符.至于什么时候用,看你的做什么项目了,到http://blog. ...

  7. Scala设计模式

    尽管Scala还有一些基于语言特性的设计模式,单本文还是着重于介绍大家所周知的经典设计模式,因为这些设计模式被认为是开发者之间交流的工具. 创建型设计模式 1.工厂方法模式 2.延迟加载模式 3.单例 ...

  8. 如何接入银联“快速接入”产品API

    引言:使用银联开放平台的用户或多或少都接触过产品API吧,那么大家对于“快速接入”产品API是否还会存在一些疑问呢?因为我之前对“快速接入”模糊不清,所以整理的一份详细的资料,里面梳理了“快速接入”产 ...

  9. Google File System 见解 (作业)

    Google File System ——见解 近年来,大街小巷都传遍的大数据,引起了社会的一阵学习大数据狂热,造成任何公司在招聘人员的时候都会注上一条,会大数据的优先考虑:但是,从另一方面来说,这狂 ...

  10. 使用描述符实现property功能

    # Author : Kelvin # Date : 2019/1/25 14:46 class Decproperty: def __init__(self, func): self.func = ...