Bootstrap4组件:弹出模态框(Modal)


发布时间:2020-03-20 16:17    作者: Uncle Hui   已过去:4 月,2 周   阅读总量:279 已被赞:0


弹出模态框(Modal)

示例

  1. ESC关闭:添加tabindex="-1"
  2. 动画效果:如果弹出模态需要淡入淡出效果,请从你的模态窗元素中添加 .fade 即可
  3. 滚动长内容:当用户viewport 视口(弹出内容区)或设备的模态变得较长时,它们会自动滚动页面
  4. 居中显示:将 .modal-dialog-centered 添加到 .modal-dialog 对话框以垂直居中模式。
  5. 尺寸大小:模态框有两个可选大小,可以通过class定义.modal-dialog添加.modal-xl/lg/sm,这些尺寸会在某些中断点调整,以避免在较小的viewport窗口上出现水平滚动条。

<div class="modal fade" tabindex="-1" id="myModal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title">标题!</h5>

<button class="close" data-dismiss="modal">×</button>

</div>

<div class="modal-body">

<p>内容内容内容内容内容内容。</p>

</div>

<div class="modal-footer">

<button class="btn btn-secondary" data-dismiss="modal">取消</button>

<button class="btn btn-primary">确定</button>

</div>

</div>

</div>

</div>

 

 

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

工具提示和弹出提示框

Tooltips工具提示 和 popovers 提示框,可以根据需要放置在模态框中。当模态框关闭时,其包含的任何提示和Pop提示都会同步关闭。

<div class="modal-body">#模态框内容部分

<h5>Tooltip工具提示</h5>

<p>这个是 <a href="#" data-toggle="tooltip" title="标题内容123!">Tooltip</a> 工具提示。</p>

<hr>

<h5>Popover弹出提示框</h5>

<p>这个是 <button class="btn btn-success" data-toggle="popover" title="标题!" data-content="内容内容内容。">Popover</button> 弹出提示框</p>

</div>

提示代码可以加在模态框的body中,实现内置的提示效果,但是不要忘记js代码。

 

使用栅格模态框内容部分依然可以使用栅格系统,就行其他地方使用就行

.modal-body中加入 .container-fluid 栅格系统,可以在动态视窗中使用Bootsrap栅格系统,并在任何地方使用正常的栅格系统class定义。

<div class="modal-body">

<div class="container-fluid">

<div class="row">

<div class="col-sm-4">aaa</div>

<div class="col-sm-8">bbb</div>

</div>

</div>

</div>

JavaScript 行为

选项

名称

Type类型

默认值

描述

backdrop

Boolean布尔值 or the string 'static'

true

包括动态视窗背景元素,或者指定 static在点击背景时不关闭动态模态框。

 

keyboard

boolean

true

按下esc时关闭动态视窗。

 

 

 

方法通过按钮收到控制开,关

(1) .modal(options):激活您的内容作为模态,将选项加入到 object内。基类

(2) .modal('show'):手动打开动态模态框,在动态模态框实际显示之前返回给调用者(即在shown.bs.modal 事件发生前)。

(3) .modal('hide'):手动隐藏动态模态框,在动态模态框实际隐藏之前返回给调用者(即在hidden.bs.modal 事件发生前)。 任何元素都可以通过这个方法实现关闭模态框,比如标题

 

(4) .modal('toggle'):手动切换动态模态框,在动态模态框实际显示或隐藏之前返回给调用者(即在shown.bs.modal 或 hidden.bs.modal事件发生之前)。如果处于关闭,点击就显示,如果处于显示,点击就关闭

事件

Event事件类型

描述

show.bs.modal

当调用show实例方法时,会立即触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。

shown.bs.modal

当模态框对用户来说可见时(需要等待CSS过渡完成),会触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。

hide.bs.modal

当调用hide实例方法时,会立即触发该事件。

hidden.bs.modal

当模态框对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。

 

点赞

0




登陆后方可评论