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. Shiro架构及其组件

    Shiro可以帮助我们完成:认证.授权.加密.会话管理.与Web集成.缓存等.这不就是我们想要的嘛,而且Shiro的API也是非常简单:其基本功能点如下图所示: Authentication:身份认证 ...

  2. HDU 4349 Xiao Ming's Hope 组合数学

    题意:给你n,问在C(n,1),C(n,2)...C(n,n)中有多少个奇数. 比赛的时候打表看出规律,这里给一个数学上的说明. Lucas定理:A,B非负整数,p是质数,A,B化为p进制分别为a[n ...

  3. xcode 条件调试

    添加条件 有时候我们可能会在某个循环中创建断点,但一次又一次地点击 continue 直到我们想要的条件出现,显然是一种非常低效的方式.好在 Xcode 为我们提供了条件断点. 首先在下列代码中插入一 ...

  4. react入门安装

    react的入门安装 1.react的适用方法有两种,其一是依赖在线的cdn地址: https://reactjs.org/docs/cdn-links.html 官方给的cdn地址如下 <sc ...

  5. 关于结构体内存对齐方式的总结（#pragma pack()和alignas()）

    最近闲来无事,翻阅msdn,在预编译指令中,翻阅到#pragma pack这个预处理指令,这个预处理指令为结构体内存对齐指令,偶然发现还有另外的内存对齐指令aligns(C++11),__declsp ...

  6. Safe and efficient allocation of memory

    Aspects of the present invention are directed at centrally managing the allocation of memory to exec ...

  7. 洛谷—— P2580 于是他错误的点名开始了

    https://www.luogu.org/problem/show?pid=2580 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次 ...

  8. Objective-C(十九、通知-消息发送模式之中的一个)——iOS开发基础

    结合之前的学习笔记以及參考<Objective-C编程全解(第三版)>,对Objective-C知识点进行梳理总结. 知识点一直在变.仅仅是作为參考.以苹果官方文档为准~ 十九.通知-消息 ...

  9. 新手学，java使用分水岭算法进行图像切割（一）

    近期被图像切割整的天昏地暗的,在此感谢老朋友周洋给我关于分水岭算法的指点!本来打算等彩色图像切割有个完满的结果再写这篇文章,可是考虑到到了这一步也算是一个阶段,所以打算对图像切割做一个系列的博文,于是 ...

  10. 【面试加分项】java自己定义注解之申明注解

    之前的博客http://blog.csdn.net/u010590685/article/details/47029447介绍了java的注解的基本知识今天我们学习怎样使用自己定义注解. 首先我们要声 ...