UI设计师-UI设计模式与组件库-Bootstrap_Bootstrap组件学习：模态对话框、弹出框与模态框.docx

PAGE1

PAGE1

Bootstrap模态对话框概述

模态对话框是Bootstrap中一种非常实用的组件，它可以在页面上创建一个“模态”窗口，即一个覆盖全屏幕的窗口，用于显示需要用户关注和互动的内容。这种对话框在用户进行信息确认、查看详细内容或进行复杂表单填写等场景中非常常见。模态对话框的特点之一是它可以阻止用户与背景页面的交互，直到模态对话框被关闭。

1原理

模态对话框的原理基于HTML、CSS和JavaScript的结合使用。Bootstrap模态对话框使用了.modal类和.modal-dialog类来构建对话框的基本结构，同时利用jQuery来控制对话框的显示和隐藏。

1.1HTML结构

模态对话框的基本HTML结构包括一个div元素，带有.modal和.fade类。.modal-dialog类用于定位对话框，而.modal-content类则提供对话框的样式。

!--ExampleModal--

divclass=modalfadeid=exampleModaltabindex=-1role=dialogaria-labelledby=exampleModalLabelaria-hidden=true

divclass=modal-dialogrole=document

divclass=modal-content

divclass=modal-header

h5class=modal-titleid=exampleModalLabel模态对话框标题/h5

buttontype=buttonclass=closedata-dismiss=modalaria-label=关闭

spanaria-hidden=truetimes;/span

/button

/div

divclass=modal-body

这里是模态对话框的主要内容。

/div

divclass=modal-footer

buttontype=buttonclass=btnbtn-secondarydata-dismiss=modal取消/button

buttontype=buttonclass=btnbtn-primary保存更改/button

/div

/div

/div

/div

1.2JavaScript触发

模态对话框通常通过JavaScript来触发显示。Bootstrap提供了预定义的data-toggle属性，可以用来自动打开模态对话框。

!--触发模态对话框的按钮--

buttontype=buttonclass=btnbtn-primarydata-toggle=modaldata-target=#exampleModal

打开模态对话框

/button

在Bootstrap5中，由于移除了对jQuery的依赖，现在使用button或a元素的data-bs-toggle和data-bs-target属性来触发模态对话框。

!--触发模态对话框的按钮，在Bootstrap5中--

buttontype=buttonclass=btnbtn-primarydata-bs-toggle=modaldata-bs-target=#exampleModal

打开模态对话框

/button

2示例

下面是一个完整的模态对话框示例，包括触发对话框的按钮和对话框本身。此示例演示了如何在页面上创建一个模态对话框，用户可以点击按钮来打开它。

!--BootstrapCSS--

linkhref=/bootstrap/4.0.0/css/bootstrap.min.cssrel=stylesheet

!--BootstrapJavaScript(jQueryandBootstrapJS)--

scriptsrc=/jquery-3.2.1.slim.min.js/script

scriptsrc=/bootstrap/4.0.0/js/bootstrap.min.js/script

!--ModalButton--

buttontype=buttonclass=btnbtn-primarydata-toggle=modaldata-target=#exampleModal

打开模态对话框

/button

!--Modal--

divclass=modalfad