<!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. ☆ [HDU4825] Xor Sum「最大异或和(Trie树)」

    传送门:>Here< 题意:给出一个集合,包含N个数,每次询问给出一个数x,问x与集合中的一个数y异或得到最大值时,y是多少? 解题思路 由于N,M非常大,暴力显然不行.抓住重点是异或,所 ...

  2. wstngfw 初始化的一些配置

    wstngfw 初始化的一些配置 1. 引导界面 2. 命令行菜单界面 3. Assign Interfaces (分配接口) Should VLANs be set up now [y|n]? nW ...

  3. 爬虫_豆瓣电影top250 （正则表达式）

    一样的套路,就是多线程还没弄 import requests import re import json headers = 'Mozilla/5.0 (Windows NT 10.0; WOW64) ...

  4. 【UVALive - 6534 】Join two kingdoms （树的直径的期望）

    bupt spring training for 2015 #2nd J 题意 给两棵树,分别有 n,m 个节点(1 ≤ N, Q ≤ 4 × 10^4),等概率连接属于不同树的两个节点,求新树的直径 ...

  5. 牛客网noip集训4

    T1 (A)[https://www.nowcoder.com/acm/contest/175/A] 给出 l, r, k,请从小到大输出所有在 [l, r] 范围内,能表示为 k 的非负整数次方的所 ...

  6. HNOI2019总结

    HNOI2019总结 Day 1 开场看三道题,T1是个计算几何,T2是个操作树加\(border\),T3题意有点复杂.想T1想了半个多小时,发现那个钝角不是很会处理,但是40分暴力应该还是可以写, ...

  7. 多项式细节梳理&模板（多项式）

    基础 很久以前的多项式总结 现在的码风又变了... FFT和NTT的板子 typedef complex<double> C; const double PI=acos(-1); void ...

  8. Redis主从复制与高可用方案

    redis简单介绍 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库.Redis与其他key – value缓存产品有以下三个特点: 支持数据的持久化,可以将内存中 ...

  9. A1125. Chain the Ropes

    Given some segments of rope, you are supposed to chain them into one rope. Each time you may only fo ...

  10. 利用sqlalchemy读取数据库 和pandas的Dataframe对象 互相生成

    #导入pandas import pandas as pd import numpy as np #导入SqlAlchemy from sqlalchemy import create_engine ...