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. 简单STL笔记

    想了好久,还是把自己了解的先整理一下吧,毕竟老是忘,这里主要简单介绍三种容器 set,queue,vector,以及栈 stack,队列queue 的简单用法.一.set 在set中,效率比vecto ...

  2. 如何修改Web.Config里面的值

    0.先添加 <add key="MAXNUM" value="6" /> 1.读取值 string maxNum = ConfigurationMa ...

  3. 脚本实现自动化安装lamp&lnmp

    #备注:前提是将lnmp和lnmp自动化脚本写好放在相应的路径, 脚本已写好,请查看我博客中的 shell脚本 专栏! #!/bin/bash #安装lamp或者lnmp path=/server/s ...

  4. 【Henu ACM Round#14 C】Duff and Weight Lifting

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 2^y可以由两个2^(y-1)相加得到. 则有一个贪心的策略. 就是2^x尽量都变成2^(x+1) (即能够凑就尽量凑) 如果x还有 ...

  5. 洛谷 P1591 阶乘数码

    P1591 阶乘数码 题目描述 求n!中某个数码出现的次数. 输入输出格式 输入格式: 第一行为t(≤10),表示数据组数.接下来t行,每行一个正整数n(≤1000)和数码a. 输出格式: 对于每组数 ...

  6. openssl之BIO系列之25---结束语

    (作者:DragonKing, Mail: wzhah@263.net ,公布于:http://openssl.126.com之ope nssl专业论坛) 经过半个月左右,最终将BIO的结构和各个分支 ...

  7. Unity中uGUI的控件事件穿透逻辑

    1.正常来说Image和Text是会拦截点击事件的,假设加入EventTrigger的话,就能够响应相应的交互事件. 2.假设Image和Text是一个Button的子控件.那么尽管其会显示在Butt ...

  8. 版本号控制-搭建gitserver

    GitHub是一个免费托管开源码的Gitserver,假设我们不想公开项目的源码,又不想付费使用.那么我们能够自己搭建一台Gitserver. 以下我们就看看,怎样在Ubuntu上搭建Gitserve ...

  9. Android学习笔记进阶18 之画图并保存图片到本地

    1.首先创建一个Bitmap图片,并指定大小:   2.在该图片上创建一个新的画布Canvas,然后在画布上绘制,并保存即可:   3.需要保存的目录File,注意如果写的目录如“/sdcard/so ...

  10. ThinkPHP5如何修改默认跳转成功和失败页面

    ThinkPHP5如何修改默认跳转成功和失败页面 一.总结 一句话总结:直接修改默认跳转页面对应的模板文件的路径:'dispatch_success_tmpl' => APP_PATH . 'i ...