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. Gym - 100637B Lunch 规律

    题意:n个点,给定起点和终点,可以每次可以走一格或两格,走一格则需要一个代价,每个格子只能走一次,问从起点到终点并经过每一个点的最小代价 思路:这题我没看出什么道理,先打了个暴力,结果发现了个相当坑的 ...

  2. iOS菜鸟成长笔记（1）——第一个iOS应用

    前言:阳光小强最近抽时间学习iOS开发,在学习过程中发现了很多有趣的东西也遇到了很多问题,为了在学习过程中能和大家交流,记录下学习的心得和学习成果,所以就有了这一个系列文章,希望这一系列文章能形成一个 ...

  3. vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:8086 && vue init webpack-simple xxx

    vue init webpack-simple mywork报错如下: vue-cli · Failed to download repo vuejs-templates/webpack-simple ...

  4. leetCode 27.Remove Element (删除元素) 解题思路和方法

    Remove Element Given an array and a value, remove all instances of that value in place and return th ...

  5. 华为荣耀3C最新版ROM的root,(4.7.1和4.8.1等等通用方法)

    手头一台honor 3c的机器.应该是线刷的时候,把IMEI给刷掉了.导致移动2G卡无法上网. 刷了4.7.1或者4.8.1.尝试了全部方法都root失败了. 正好我手头有6582的代码.我想.既然系 ...

  6. 浅析.Net数据操作机制

    举个栗子,获取新闻详情的案例. public ActionResult NewsView(int newsId) { var news = _newsService.GetNewsById(newsI ...

  7. UICollectionView——整体总结

    前言 这几天有时间看了下UICollectionView的东西,才发觉它真的非常强大,很有必要好好学习学习.以前虽然用过几次,但没有系统的整理总结过.这两天我为UICollectionView做一个比 ...

  8. 8.AXIS1基础

    转自:https://blog.csdn.net/chjttony/article/details/6209998 1.AXIS简介: Axis是Apache组织推出的SOAP引擎,Axis项目是Ap ...

  9. date---显示或设置系统时间与日期

    date命令可以用来显示或设定系统的日期与时间,格式设定为一个加号后接数个标记,其中可用的标记列表如下: 时间方面: %H : 小时(00..23) %M : 分钟(00..59) %p : 显示本地 ...

  10. Python修改文件内容

    工作中要写个脚本来修改文件的内容,然后就写了一个刷子: #coding:utf8 import os def modify_file(old_file, new_version, old_versio ...