bootstrap课程11 模态框如何使用

一、总结

一句话总结：多看手册咯。

1、模态框对应的英文单词是什么？

modal，而不是madel

2、bootstrap中如何关闭某个效果？

比如要关掉modal
data-dismiss="modal"

3、bootstrap里面的事件就是data-什么什么，如果这样操作不方便的时候，我们怎么操作？

自己加js，手册里面会告诉你怎么用js的

4、bootstrap里面的data-target和a标签的href的关系是怎样的？

这两个是一样的

二、bootstrap课程11 模态框如何使用

1、相关知识

.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer

 

2、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class='page-header'>Bootstrap框架</h1>    

         <a href='#mymodal' class='btn btn-primary btn-lg' data-toggle='modal'>Launch demo modal</a>

         <div id="mymodal" class='modal fade'>

             <div class="modal-dialog modal-lg">

                 <div class="modal-content">

                     <div class="modal-header">

                         <div class="close" data-dismiss='modal'>&times;</div>

                         <h3>linux技术文章</h3>

                     </div>

                     <div class="modal-body">

                         <h4>linux</h4>

                         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

                     </div>

                     <div class="modal-footer">

                         <button class='btn btn-primary save'>save</button>

                         <button class='btn btn-default' data-dismiss='modal'>close</button>

                     </div>

                 </div>

             </div>

         </div>

     </div>

 </body>

 <script>

 $('.save').click(function(){

     alert('登录成功!');

     //把modal隐藏

     $('#mymodal').modal('hide');

 });

 </script>

 </html>
 

bootstrap课程11 模态框如何使用的更多相关文章

  1. Bootstrap Modals（模态框）

    http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...

  2. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  3. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  4. bootstrap中的模态框（modal，弹出层）

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  5. bootstrap下使用模态框，在模态框内输入框中回车时，模态框自动关闭的问题及解决方法

    使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(do ...

  6. 拥Bootstrap入怀——模态框（modal）篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  7. BootStrap的动态模态框及静态模态框

    1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html&g ...

  8. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  9. bootstrap 点击模态框上的提交按钮后，模态框不能关闭的解决办法

    项目问题如下图, 点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(del ...

随机推荐

  1. BZOJ 1598 第k短路

    思路: 先反向建图 Dijkstra一遍 求出h数组 再正向建图 A_star一遍 搞定 //By SiriusRen #include <queue> #include <cstd ...

  2. Android 使用Retrofit请求API数据

    概览 Retrofit 是一个Square开发的类型安全的REST安卓客户端请求库.这个库为网络认证.API请求以及用OkHttp发送网络请求提供了强大的框架 .理解OkHttp 的工作流程见  这个 ...

  3. Python(八) 正则表达式与JSON

    一.初识正则表达式 正则表达式 是一个特殊的字符序列,一个字符串是否与我们所设定的这样的字符序列,相匹配 快速检索文本.实现替换文本的操作 json(xml) 轻量级 web 数据交换格式 impor ...

  4. Python环境搭建—安利Python小白的Python安装详细教程

    人生苦短,我用Python.众所周知,Python目前越来越火,学习Python的小伙伴也越来越多.最近看到群里的小伙伴经常碰到不会安装Python或者不知道去哪下载Python安装包等系列问题,为了 ...

  5. Vuejs2.0构建一个彩票查询WebAPP(1)

    说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习.其中编程语法错误或者写作水平刺眼,还望轻喷. 使用工具:Visual Studio Code.技术栈为vue2+vuex+ax ...

  6. JBoss配置连接池

    什么是数据库连接池? 配置连接池为的是解决效率问题.由于每创建一个连接都是非常耗时的,有了连接池,就能够提前放一些连接进去.以后我们再用连接就去连接池里面取而不是每次都创建.可是我们知道连接池是有上限 ...

  7. AFNetworking 取消请求

    取消单个操作: AFHTTPRequestOperation *operation = [[AFHTTPRequestOperation alloc] initWithRequest:request] ...

  8. C#开发 —— 泛型，文件

    泛型的目标是采用广泛适用和可交互性的形式来表示算法和数据结构 —— 参数化 泛型能子啊编译时提供强大的类型检查,减少数据类型之间的显式转换,装箱操作和运行时的类型检查 泛型的类型参数T可以被看作是一个 ...

  9. centos配置tomcat编辑修改

    https://jingyan.baidu.com/article/6525d4b1382f0aac7d2e9421.html

  10. halt---关闭正在运行的Linux操作系统。

    halt命令用来关闭正在运行的Linux操作系统.halt命令会先检测系统的runlevel,若runlevel为0或6,则关闭系统,否则即调用shutdown来关闭系统. 语法 halt(选项) 选 ...