模态框 modal.js

模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。

不支持模态框重叠

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

模态框的 HTML 代码放置的位置

务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

对于移动设备的附加说明

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

$(‘#myModal‘).on(‘shown.bs.modal‘, function () {
    $(‘#myInput‘).focus()
  })

实例

静态实例

以下模态框包含了模态框的头、体和一组放置于底部的按钮。

时间: 2024-07-30 10:42:39

模态框 modal.js的相关文章

Bootstrap历练实例:模态框(Modal)插件

模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:模态框(Modal)插

Bootstrap(v3.2.0)模态框(modal)垂直居中

Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": function () { return (that.$element.height(

Bootstrap模态框(modal)垂直居中

http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行. 最终只能研究一下源码了,发现可以在bootstrap.js文件后面添加如下代码,便可以实现垂直居中. /* =====================================================================

模态框MODAL的一些事件捕捉

下表列出了模态框中要用到事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.modal 在调用 show 方法后触发. $('#identifier').on('show.bs.modal', function () { // 执行一些动作... }) shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成). $('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })

禁用 BootStrap 模态框(Modal) 点击空白时自动关闭

在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCompany').modal({backdrop: 'static', keyboard: false}); 参数说明: backdrop 为 static 时,点击模态对话框的外部区域不会将其关闭. keyboard 为 false 时,按下 Esc 键不会关闭 Modal. 就这一行代码解决了我的

【JavaScript】纯粹javascript无任何插件的兼容IE6的模态框modal

模态框这东西在很多前端框架里面也是存在的,但是很多前端框架,如Bootstrap,AmazeUI,Jquery对IE6的兼容性极其糟糕,因此如果自己手写一个纯粹javascript无任何插件的的模态框,不仅能够兼容IE6,对其它浏览器很有很大的兼容性,同时,也好改. 一.基本目标 比如如下的模态框,怎么用在纯粹html+css+javascript,在无任何前端插件的情况下实现呢? 可以看到效果图,是在IETester的IE6模式中进行的,没有任何问题. 我还在这个模态框里面镶嵌了一个表单.反正

bootstrap弹出层Modal 模态框

bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: [html] view plain copy <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse

使用bootstrap的插件实现模态框效果方法步骤详解

本文和大家分享的主要是使用bootstrap 库的模态框插件 modal.js 来实现模态框效果相关内容,同时也使大家进一步熟悉 bootstrap 的插件使用,一起来看看吧,希望对大家学习bootstrap有所帮助. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.

使用bootstrap的插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap