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. C++中的namespace详解

    原文链接:http://blog.csdn.net/yao_zhuang/article/details/1853625 namespace中文意思是命名空间或者叫名字空间,传统的C++只有一个全局的 ...

  2. 模板实参推导 & xx_cast的实现

    首先,类模板必须被显式特化.当然了,可以通过一个辅助函数,通过参数类型,返回特化的类模板,来间接处理. 这个技术被广泛应用在ptr_fun, make_pair, mem_fun, back_inse ...

  3. 用Shell脚本过滤Hadoop中不能訪问的节点

    近期使用的一个集群hp1,由于维护集群的人不给力.节点总是过一段时间就掉一两个.今天发现重新启动hadoop时,HDFS已经进入保护模式了. 决定把slaves节点中的无法訪问的节点所有过滤掉.所以写 ...

  4. Android简单实现Socket通信，client连接server后，server向client发送文字数据

    案例实现的是简单的Socket通信,当client(Androidclient)连接到指定server以后,server向client发送一句话文字信息(你能够拓展其他的了) 先看一下服务端程序的实现 ...

  5. Activity 之间 传递 List 封装的对象或者对象

    项目中遇到 从也个页面向还有一个页面跳转传递一个List 封装的对象 .按网上查的资料 须要把 对象 实现 Serializable接口. 写了一下.可是跳转直接崩溃.一直看错误之日找不到原因后来自习 ...

  6. 知名游戏开发者称 C++ 是一种非常糟糕、可怕的语言（C++不是一门可怕的语言，可怕的是一群没有耐心的程序员来使用C++这门语言）

    抛出一个问题:C++ 真的很可怕吗? 2016 年底,C++ 之父 Bjarne Stroustrup 在一次采访中表示:”C++ 让编程专家很容易编写出复杂.高性能.低资源消耗的代码,但不足以成为广 ...

  7. js函数的属性和方法

    js函数的属性和方法 前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解j ...

  8. amaze ui中的icon button

    amaze ui中的icon button 说明几点: 1.链接效果 连接效果的本质一般都是a标签,好像很多button的链接效果都是用的a标签,submit表单提交或者button的type为sub ...

  9. 40.Node.js Web 模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计 ...

  10. solr简介

    Solr 是什么? Solr它是一种开放源码的.基于 Lucene Java 的搜索服务器,易于加入到 Web 应用程序中. Solr 提供了层面搜索(就是统计).命中醒目显示并且支持多种输出格式(包 ...