模态弹框（Modal）

您所在的位置：网站首页 › 文字弹窗模板怎么做出来的 › 模态弹框（Modal）

模态弹框（Modal）

2023-06-21 04:53| 来源: 网络整理| 查看: 265

工作原理

在开始使用Bootstrap互动视窗之前，请务必阅读以下内容，因为菜单项目在近期内有修改。

互动视窗是用HTML、CSS和JavaScript构建的。它们位于文件中任何其他内容之上，并从body中删除滚动，以便互动视窗的内容滚动。点击互动视窗“backdrop”将自动关闭互动视窗。 Bootstrap一次只支持一个互动视窗。不支持巢状互动视窗，因为我们认为巢状互动视窗用户体验不佳。互动视窗使用position: fixed，在渲染呈现上会有点特别。尽可能将您的互动视窗HTML放置在顶级位置，以避免其他元素的潜在干扰。在另一个固定元素中内加入一个.modal的时候，你可能会遇到问题。由于position: fixed，在移动设备上使用互动视窗有一些附加说明。有关详细信息，请参阅我们的浏览器支持。依据HTML5定义语义的方式，autofocus HTML属性对Bootstrap互动视窗没有影响。要达到同样的效果，请使用一些自定义JavaScript：the autofocus HTML attribute var myModal = document.getElementById('myModal') var myInput = document.getElementById('myInput') myModal.addEventListener('shown.bs.modal', function () { myInput.focus() }) 该组件的动画效果取决于偏好减少的运动媒体查询。请参阅我们的可访问性文档的简化运动部分。

继续阅读demos和使用指南。

示例动态视窗元件

下面是一个静态动态视窗示例（意思是它的position和display已被复写）。包括动态视窗标题、动态视窗主体（padding必要）和动态视窗页脚（可选）。尽可能地包含动态视窗标题与移除按钮，或提供另一个明确的移除操作。

Modal title

Modal body text goes here.

Modal title Modal body text goes here. Close Save changes 完整示例

通过点击下面的按钮切换动态视窗呈现。它将从页面顶部向下滑动并淡入。

Modal title

Woohoo, you're reading this text in a modal!

Launch demo modal Modal title ... Close Save changes 静态背景

当将背景设置为静态时，互动视窗不会因为点击背景而关闭。

Modal title

I will not close if you click outside me. Don't even try to press escape key.

Launch static backdrop modal Modal title ... Close Understood 滚动长内容

当使用者的动态视窗变得太长时，它们的滚动独立于于页面本身。透过下方示例了解：

Modal title

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

除此之外您也可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。

Modal title

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

... 垂直居中

加入.modal-dialog-centered到.modal-dialog来使互动视窗垂直置中。

Modal title

Placeholder text for this demonstration of a vertically centered modal dialog.

Modal title

Placeholder text for this demonstration of a vertically centered modal dialog.

In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.

... ... 工具提示和弹出窗口

Tooltips和popovers可以根据需要放置在动态视窗。当动态视窗关闭时，其中的任何工具提示和插件也将自动关闭。

Modal title Popover in a modal

This button triggers a popover on click.

Tooltips in a modal

This link and that link have tooltips on hover.

Popover in a modal This button triggers a popover on click. Tooltips in a modal This link and that link have tooltips on hover. 使用网格

透过在.modal-body中加入.container-fluid在互动视窗中使用Bootstrap网格系统。然后像其他任何地方一样使用正常的网格系统class。

Grids in modals .col-md-4 .col-md-4 .ms-auto .col-md-3 .ms-auto .col-md-2 .ms-auto .col-md-6 .ms-auto Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6 .col-md-4 .col-md-4 .ms-auto .col-md-3 .ms-auto .col-md-2 .ms-auto .col-md-6 .ms-auto Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6 可变模态内容

有数个按钮要用来触发相同互动视窗，但会导入不同内容？使用event.relatedTarget和HTML data-bs-*属性依据点击按钮来更改动态视窗的内容。

下面是HTML和JavaScript的示例。有关relatedTarget的详细信息，请参阅互动视窗的事件。

New message Open modal for @mdo Open modal for @fat Open modal for @getbootstrap New message Recipient: Message: Close Send message var exampleModal = document.getElementById('exampleModal') exampleModal.addEventListener('show.bs.modal', function (event) { // Button that triggered the modal var button = event.relatedTarget // Extract info from data-bs-* attributes var recipient = button.getAttribute('data-bs-whatever') // If necessary, you could initiate an AJAX request here // and then do the updating in a callback. // // Update the modal's content. var modalTitle = exampleModal.querySelector('.modal-title') var modalBodyInput = exampleModal.querySelector('.modal-body input') modalTitle.textContent = 'New message to ' + recipient modalBodyInput.value = recipient }) Toggle between modals

在多个模态之间切换，巧妙地放置data-bs-target和data-bs-Toggle属性。例如，可以在已打开的登录模式中切换密码重置模式。请注意，不能同时打开多个模态。这个方法只是在两个单独的模态之间切换。

Modal 1 Show a second modal and hide this one with the button below. Modal 2 Hide this modal and show the first with the button below. Open first modal ... Open #modal2 ... Open #modal Open #modal 更改动画

$modal-fade-transform变数在互动视窗执行淡入动画前会先确定.modal-dialog的转换状态，当互动视窗的淡入动画结束时，$modal-show-transform变数会决定淡入动画结束时.modal-dialog的转换。

如果您想要一个放大的动画，您可以设定$modal-fade-transform: scale（.8）

移除动画

对于只要出现而不需要淡入淡出的互动视窗，你只需要在互动视窗中删除.fade。

... 动态高度

如果互动视窗的高度在打开时发生变化，则应呼叫myModal.handleUpdate（）以重新调整互动视窗的位置，以防滚动条出现。

可达性

请务必在.modal上添加aria-labelledby=“…”来引用互动视窗标题。另外，你也可以在.modal上使用aria-describedby来描述你的动态视窗。请注意你不需要加上role=“dialog”，因为bootstrap的JavaScript已经有添加了。

嵌入YouTube视频

在互动视窗上嵌入YouTube视频需要额外的JavaScript以自动停止回放或其他更多功能。有关详细信息，请参阅Stack Overflow的文章。 See this helpful Stack Overflow post for more information.

可选尺寸

互动视窗有三个可选的大小，透过.modal-dialog上的modifier Class启用。这些尺寸会在某些断点调整，以避免在较窄的viewport上出现水平卷轴。

Size Class Modal max-width Small .modal-sm 300px Default None 500px Large .modal-lg 800px Extra large .modal-xl 1140px

预设的互动视窗没有“medium”这个类别的大小。

... ... ... Extra large modal ... Large modal ... Small modal ... 全屏模式

另一个的覆盖选项是跳出一个完全覆盖用户屏幕的互动视窗，可透过在.modal-dialog上放置修饰类别来启用。

Class Availability .modal-fullscreen Always .modal-fullscreen-sm-down Below 576px .modal-fullscreen-md-down Below 768px .modal-fullscreen-lg-down Below 992px .modal-fullscreen-xl-down Below 1200px .modal-fullscreen-xxl-down Below 1400px ... Full screen modal

What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.

Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.

Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.

Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.

I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.

Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.

Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.

We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.

Full screen below sm ... Full screen below md ... Full screen below lg ... Full screen below xl ... Full screen below xxl ... Sass Variables $modal-inner-padding: $spacer; $modal-footer-margin-between: .5rem; $modal-dialog-margin: .5rem; $modal-dialog-margin-y-sm-up: 1.75rem; $modal-title-line-height: $line-height-base; $modal-content-color: null; $modal-content-bg: $white; $modal-content-border-color: rgba($black, .2); $modal-content-border-width: $border-width; $modal-content-border-radius: $border-radius-lg; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width); $modal-content-box-shadow-xs: $box-shadow-sm; $modal-content-box-shadow-sm-up: $box-shadow; $modal-backdrop-bg: $black; $modal-backdrop-opacity: .5; $modal-header-border-color: $border-color; $modal-footer-border-color: $modal-header-border-color; $modal-header-border-width: $modal-content-border-width; $modal-footer-border-width: $modal-header-border-width; $modal-header-padding-y: $modal-inner-padding; $modal-header-padding-x: $modal-inner-padding; $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility $modal-sm: 300px; $modal-md: 500px; $modal-lg: 800px; $modal-xl: 1140px; $modal-fade-transform: translate(0, -50px); $modal-show-transform: none; $modal-transition: transform .3s ease-out; $modal-scale-transform: scale(1.02); Loop

Responsive fullscreen modals are generated via the $breakpoints map and a loop in scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); $postfix: if($infix != "", $infix + "-down", ""); @include media-breakpoint-down($breakpoint) { .modal-fullscreen#{$postfix} { width: 100vw; max-width: none; height: 100%; margin: 0; .modal-content { height: 100%; border: 0; @include border-radius(0); } .modal-header { @include border-radius(0); } .modal-body { overflow-y: auto; } .modal-footer { @include border-radius(0); } } } } 用法

互动视窗插件透过数据属性或JavaScript切换您隐藏的内容。它将.modal-open加到body以复写预设的滚动行为，并生成一个.modal-backdrop来提供点击区域，以便在点击动态视窗外面时移除显示的动态视窗。

通过数据属性

启动一个动态视窗而无需编写JavaScript。在控制元素上（如按钮）设置data-bs-toggle=“modal”，以及一个data-bs-target=“#foo”或href=“#foo”来指定特定的动态视窗进行切换。

Launch modal 通过JavaScript

用一行JavaScript创建一个互动视窗：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) 选项

可以透过数据属性或JavaScript传递选项。对于数据属性，将选项名称附加到data-bs，如data-bs-backdrop=“”。

Name Type Default Description backdrop boolean or the string 'static' true 包括模态背景元素。或者，为不在单击时关闭模式的背景指定static。 keyboard boolean true 按escape键时关闭模式 focus boolean true 初始化时将焦点放在模态上。方法异步方法和转换

所有API方法都是异步的，并开始转换。转换一开始就返回到调用方，但在转换结束之前返回。此外，对转换组件的方法调用将被忽略。有关更多信息，请参阅我们的JavaScript文档。

传递选项

将你的内容启用为互动视窗，接受一个选择性的object选项。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false }) 切换

手动切换动态视窗。在动态视窗实际显示或隐藏之前返回给调用者（即在shown.bs.modal或hidden.bs.modal事件发生之前）。

myModal.toggle() 显示

手动打开动态视窗。在动态视窗实际显示之前返回给调用者（即在shown.bs.modal事件发生之前）。

myModal.show()

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget myModal.show(modalToggle) 隐藏

手动隐藏动态视窗。在动态视窗实际隐藏之前返回给调用者（即在hidden.bs.modal事件发生之前）。

myModal.hide() 手动更新

如果动态视窗在打开状态（比如在出现卷轴的情况下）高度改变，则重新调整动态视窗的位置。

myModal.handleUpdate() 销毁

销毁一个元素的Modal。（删除DOM元素上储存的数据）

myModal.dispose() 获取实例

静态方法，可以让你获取与DOM元素相关联的互动视窗实例。

var myModalEl = document.getElementById('myModal') var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance 事件

Bootstrap的model class也有提供一些用于model功能的事件，所有相关事件都在Model本身被触发（在

）。 Event type Description show.bs.modal 当呼叫show实例方法时，此事件会立即触发。如果是由点击事件触发，被点击的元素可作为事件的relatedTarget属性。 shown.bs.modal 当呼动视窗显示时将会触发此事件（等待CSS转换完成）。如果是由点击事件触发，被点击的元素可作为事件的relatedTarget属性. hide.bs.modal 当呼叫hide实例方法时，将会立即触发此事件。 hidden.bs.modal 当互动视窗隐藏后将会触发此事件（等CSS转换完成）。 hidePrevented.bs.modal 当显示互动视窗后将会触发此事件，其背景是static的，model以外的点击或按下esc会被键盘选项、data-bs-keyboard设置为false。 var myModalEl = document.getElementById('myModal') myModalEl.addEventListener('hidden.bs.modal', function (event) { // do something... })

【本文地址】

模态弹框（Modal）

模态弹框（Modal）

今日新闻

推荐新闻