您的当前位置:首页使用Bootstrap过渡效果Transition模态框(Modal)的方法

使用Bootstrap过渡效果Transition模态框(Modal)的方法

2023-12-01 来源:热乐宠物网
这篇文章主要介绍了Bootstrap 过渡效果Transition 模态框(Modal),非常不错,具有参考借鉴价值,需要的朋友可以参考下

可以切换模态框(Modal)插件的隐藏内容:

1、通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier"href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框(带有 id="identifier")

2、通过 Javascript:使用这种技术,您可以通过简单的一行 Javascript 来调用带有 id="identifier" 的模态框:

使用Bootstrap过渡效果Transition模态框(Modal)的方法

注:

官方API 意思是为盲人或者一些可读设备设置的 role的设置告诉设备这是弹出框 aria-labelledby=".."里面是描述信息,然后aria-hidden="true"再把它隐藏掉,一般人用不到,这样写比较规范

增强模态框的可访问性

务必为 .modal 添加 role="dialog"aria-labelledby="..." 属性,用于指向模态框的标题栏;为 .modal-dialog 添加 aria-hidden="true" 属性。

另外,你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

效果图

使用Bootstrap过渡效果Transition模态框(Modal)的方法

相关文章:

详解Bootstrap实现基本布局的方法

BootStrap table使用方法分析

JS组件Bootstrap Table表格行拖拽效果实现代码

小编还为您整理了以下内容,可能对您也有帮助:

Bootstrap 模态框(Modal)使用

定义一个a标签,通过标签的点击事件调用Modal

<a id="add" class="btn btn-info" onclick="add();">新增</a>

点击保存后刷新当前页面

parent.location.reload();

bootstrap 模态框(modal)点击空白处和ESC不关闭的方法

bootstrap 模态框(modal)默认点击非模态框部分和键盘esc会关闭模态框,但是有时会有需求不允许关闭,所以介绍一下实现这种需求的两种方法。

第一种:使用js

$('#modal').modal({backdrop: 'static', keyboard: false});

backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭.

第二种:使用属性

data-backdrop="static" data-keyboard="false"

如:

bootstrap 模态框 modal 插件在一个含有多个页面

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框(Modal)插件的隐藏内容:

通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。

通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:

$('#identifier').modal(options)

实例

一个静态的模态窗口实例,如下面的实例所示:

实例

<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">

<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 -->

</div>

尝试一下 ?0?3

结果如下所示:

模态框(Modal)插件

代码讲解:

使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。

如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。

在模态框中需要注意两点:

第一是 .modal,用来把 <div> 的内容识别为模态框。

第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。

aria-labelledby="myModalLabel",该属性引用模态框的标题。

属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。

<div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。

class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。

data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。

class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。

data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

选项

有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

选项名称类型/默认值Data 属性名称描述

backdropboolean 或 string 'static'

默认值:truedata-backdrop指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。

keyboardboolean

默认值:truedata-keyboard当按下 escape 键时关闭模态框,设置为 false 时则按键无效。

showboolean

默认值:truedata-show当初始化时显示模态框。

remotepath

默认值:falsedata-remote使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

方法

下面是一些可与 modal() 一起使用的有用的方法。

方法描述实例

Options: .modal(options)把内容作为模态框激活。接受一个可选的选项对象。

$('#identifier').modal({

keyboard: false

})

Toggle: .modal('toggle')手动切换模态框。

$('#identifier').modal('toggle')

Show: .modal('show')手动打开模态框。

$('#identifier').modal('show')

Hide: .modal('hide')手动隐藏模态框。

$('#identifier').modal('hide')

实例

下面的实例演示了方法的用法:

实例

<!-- 模态框(Modal) -->

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

<div class="modal-dialog">

<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">按下 ESC 按钮退出。</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({

keyboard: true

})

});

</script>

尝试一下 ?0?3

结果如下所示:

模态框(Modal)插件方法

只需要点击 ESC 键,模态窗口即会退出。

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件描述实例

show.bs.modal在调用 show 方法后触发。

$('#identifier').on('show.bs.modal', function () {

// 执行一些动作...

})

shown.bs.modal当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。

$('#identifier').on('shown.bs.modal', function () {

// 执行一些动作...

})

hide.bs.modal当调用 hide 实例方法时触发。

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

// 执行一些动作...

})

hidden.bs.modal当模态框完全对用户隐藏时触发。

$('#identifier').on('hidden.bs.modal', function () {

// 执行一些动作...

})

实例

下面的实例演示了事件的用法:

实例

<!-- 模态框(Modal) -->

<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">

<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>

bootstrap 怎么实现在弹出框上再弹出模态框

$("#显示按钮").click(function(){ $("#Modal").modal("show"); resultFilterSE();//模态框弹出后触发的函数 }); function resultFilterSE(){ //函数体。。 }

bootstrap 怎么实现在弹出框上再弹出模态框

$("#显示按钮").click(function(){ $("#Modal").modal("show"); resultFilterSE();//模态框弹出后触发的函数 }); function resultFilterSE(){ //函数体。。 }

bootstrap 模态框的关闭后,背景仍然是暗色的。

1.这个问题是两种写法不同造成的

第一种

$('#avatar-modal').modal('hide');

这种写法模态框会关闭,并背景恢复。

第二种

$('#avatar-modal').modal().hide();

这种写法,模态框会消失,但暗色背景仍然在。不能操作。

所以建议bootstrap相关语法,用第一种即可。

2.解决二级模态框关闭后,遮罩阴影依然存在,导致页面无法操作的BUG

在项目后台中由于需要展示二级模态框,在点击关闭二级模态框(弹出框)的时候出现了遮罩阴影依然存在,导致页面呈现暗灰色,无法操作的现象效果图如下:

出现改问题的原因是:由于点击“关闭”按钮或点击模态框右上角的“X”或点击模态框右边的空白处,会使两层或多层模态框同时关闭,但是modal自己生成的遮罩层只关闭了一个,其他的依然存在,因此导致遮罩阴影覆盖原有页面,导致无法操作页面。

解决问题的方法:(1)当最外层的modal关闭后,手动删除所有的遮罩层:$("#soldier-modal”).remove()

问题总结: 这些问题所涉及到的都是些前端的知识,是bootstrap中的模态框的应用。

怎样设定bootstrap模态框弹出位置

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型 描述

show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的 元素,则此元素可以通过事件的relatedTarget 属性进行访问。

shown.bs.modal 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触 发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件 的 relatedTarget 属性进行访问。

hide.bs.modal hide 方法调用之后立即触发该事件。

hidden.bs.modal 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。

loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

JS代码:

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

// do something...

})

热乐宠物网还为您提供以下相关内容希望对您有帮助:

有谁知道这种轮播图动画是如何实现的?

2. 使用前端框架/库 许多前端框架或库都提供了轮播图组件或插件,如Bootstrap、jQuery UI、Vue.js等。这些组件或插件通常提供了丰富的配置选项和API,可以方便地实现轮播图动画。3. 使用PPT或其他演示软件 如果你只是想在PPT或其他演示软件中制作简单的轮播图动画,可以使用内置的动画效果来实现。具体方...

web开发需要学习什么?

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端,整理网页开发技巧。3、预编译css技术:less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发,深入了解BootStrap。4、使用HTML、CSS、L...

web前端开发需要学习什么知识?

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发: 跨终端WEB和...

Top