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 -->

×就是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的官网查看输入框组的学习即可，代码效果如下：

转载于:https://www.cnblogs.com/qq946487854/p/10121639.html

关于boostrap的modal隐藏问题（前端框架）相关推荐

Boostrap ZURB Foundation —— Web开发前端框架
webflow: Webflow 允许设计师通过自由的拖拉拽与 CSS 类互动,而定义它们的过程无需写任何一行代码. 用户在完成从设计到 CSS 构架之后,甚至可以在线直接将建好的网页发布,而不需要导 ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形一.了解微前端 1. 什么是微前端为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
使用ABP打造SAAS系统（2）——前端框架选择
一.流行框架比较作者用过的前端框架不少,曾经还在一个项目中同时使用两套框架控件(年少无知.效率特慢),所以可供选择的前端框架有不少: easyui: 优点:非常成熟的框架,基于iframe可以进行多 ...
跨屏html ui,Amaze UI(HTML5 跨屏前端框架) v2.7.2
Amaze UI 2.7.2 更新日志:2016-08-17 JS: Improved #900 处理Modal元素停止冒泡引发的使用不变问题: Improved #901 调整Tabs样式,适应元素 ...
2020年最新前端框架大全，Web工程师人手一份！
今天跟大家分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地址:https://parceljs.org Parcel是一款极速零配置WEB应用打 ...
失败原因【object object】_使用前端框架Vue的原因！
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...

关于boostrap的modal隐藏问题（前端框架）

Modal（模态框）

关于boostrap的modal隐藏问题（前端框架）相关推荐

最新文章

热门文章