<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<!--修改模态框 出现的位置-->

<style type="text/css">

    .modal.fade.in{

        top:90px;

    }

</style>

<body>

<h2>模态框（Modal）插件事件</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog" style="width:100%;height:100px;">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×

                </button>

                <h4 class="modal-title" id="myModalLabel">

                    模态框（Modal）标题

                </h4>

            </div>

            <div class="modal-body">

                点击关闭按钮检查事件功能。

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">

                    关闭

                </button>

                <button type="button" class="btn btn-primary">

                    提交更改

                </button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>

   $(function () { $('#myModal').modal('hide')});

</script>

<script>

   $(function () { $('#myModal').on('hide.bs.modal', function () {

      //alert('嘿，我听说您喜欢模态框...');})

   });

</script>

</body>

</html>

Bootstrap模态框修改出现的位置和大小的更多相关文章

  1. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  2. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

  3. 基于bootstrap模态框的日期选择器

    近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...

  4. 解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决

    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...

  5. bootstrap模态框传值操作

    1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  6. Bootstrap 模态框、轮播 结合使用

    Bootstrap 模态框和轮播分开使用的教程网上非常多.可是两者结合使用的样例和资料非常少. 两者结合使用时,開始我遇到了不少bug,如今分享给大家. 我的这个样例是把图片轮播嵌入到模态框里. 最后 ...

  7. JavaScript：bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  8. bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动，select选中跳转

    bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...

  9. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

随机推荐

  1. Codeforces997D Cycles in product 【FFT】【树形DP】

    题目大意: 给两个树,求环的个数. 题目分析: 出题人摆错题号系列. 通过画图很容易就能想到把新图拆在两个树上,在树上游走成环. 考虑DP状态F,G,T.F表示最终答案,T表示儿子不考虑父亲,G表示父 ...

  2. [APIO 2009] Atm

    传送门:>Here< 题意:给出一个有向图(有环),每个点有点权.从点S出发,经过每个点Tot可以加上点权,点可以经过多次,然而点权不能重复加多次.先要求走到某个终点E时点权最大.先要求在 ...

  3. 使用npm安装appium时的坑

    使用命令安装appium 命令安装 npm install -g appium(如果安装失败那么就指定国内的淘宝源安装吧,官方源我应该试了n次费了很大劲才安装成功) 指定淘宝源安装:设置 npm 淘宝 ...

  4. 【BZOJ1004】【HNOI2008】Cards 群论 置换 burnside引理 背包DP

    题目描述 有\(n\)张卡牌,要求你给这些卡牌染上RGB三种颜色,\(r\)张红色,\(g\)张绿色,\(b\)张蓝色. 还有\(m\)种洗牌方法,每种洗牌方法是一种置换.保证任意多次洗牌都可用这\( ...

  5. Nifi 模板

        Acqusition_and_Processing.xml Moving templates to own directory to make repo cleaner   CADF_Pars ...

  6. stm32使用rt-thread在文件《stm32f1xx_hal.h》中头文件包含顺序引出的错误

    @2019-01-24 [小记] 在学习 rt-thread BSP制作过程中,发现文件<stm32f1xx_hal.h>中 Env工具生成的原始顺序 1. #include " ...

  7. PHP使用自定义key实现对数据加密解密

    // 加密 function encryptStr($str, $key){ $block = mcrypt_get_block_size('des', 'ecb'); $pad = $block - ...

  8. Java中数组判断元素存在几种方式比较详解

    1. 通过将数组转换成List,然后使用List中的contains进行判断其是否存在 public static boolean useList(String[] arr,String contai ...

  9. 牛客小白月赛6C-桃花（DFS/BFS求树的直径）

    链接:https://www.nowcoder.com/acm/contest/136/C 来源:牛客网 桃花 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言 ...

  10. SQL查询语句的进阶使用

    MySQL的进阶使用 sql语句一些功能的使用 导入现有大量数据文件步骤 1) 把*.sql文件拷贝到Linux某一位置(例如Desktop) 2) Linux命令行进入该位置 cd ~/Deskto ...