Выкарыстоўвайце мадальны плагін JavaScript ад Bootstrap, каб дадаць на ваш сайт дыялогавыя вокны для лайтбоксаў, апавяшчэнняў карыстальнікаў або цалкам карыстацкага кантэнту.
Як гэта працуе
Перш чым пачаць працу з мадальным кампанентам Bootstrap, не забудзьцеся прачытаць наступнае, паколькі нашы параметры меню нядаўна змяніліся.
Мадальныя пабудовы створаны з дапамогай HTML, CSS і JavaScript. Яны размешчаны над усім астатнім у дакуменце і выдаляюць пракрутку, <body>каб замест яе пракручваўся мадальны змест.
Пры націсканні на мадальны «заднік» мадальнае аўтаматычна зачыніцца.
Bootstrap падтрымлівае толькі адно мадальнае акно адначасова. Укладзеныя мадалы не падтрымліваюцца, бо мы лічым, што яны не спрыяюць карыстанню.
Мадальнае выкарыстанне position: fixed, што часам можа быць трохі асабліва ў яго візуалізацыі. Па магчымасці размяшчайце свой мадальны HTML на верхнім узроўні, каб пазбегнуць магчымых перашкод з боку іншых элементаў. Верагодна, вы сутыкнецеся з праблемамі пры ўкладанні ў .modalіншы фіксаваны элемент.
З-за таго, як HTML5 вызначае сваю семантыку, атрыбут autofocusHTML не мае ніякага эфекту ў мадальных варыянтах Bootstrap. Каб дасягнуць таго ж эфекту, выкарыстоўвайце карыстацкі JavaScript:
Працягвайце чытаць дэманстрацыі і рэкамендацыі па выкарыстанні.
Прыклады
Мадальныя кампаненты
Ніжэй прыведзены статычны мадальны прыклад (гэта значыць, што positionі displayбылі перавызначаны). Уключаны мадальны загаловак, мадальны тэкст (неабходны для padding) і мадальны ніжні калонтытул (неабавязковы). Мы просім вас уключаць мадальныя загалоўкі з дзеяннямі адхілення кожны раз, калі гэта магчыма, або прадставіць іншае відавочнае дзеянне адхілення.
Мадальны загаловак
Мадальны асноўны тэкст змяшчаецца сюды.
Жывая дэманстрацыя
Пераключыце працуючую мадальную дэманстрацыю, націснуўшы кнопку ніжэй. Ён будзе слізгаць уніз і знікаць з верхняй часткі старонкі.
Мадальны загаловак
Ура, вы чытаеце гэты тэкст мадальна!
Статычны фон
Калі фон усталяваны як статычны, мадальнае не будзе закрывацца пры пстрычцы па-за ім. Націсніце кнопку ніжэй, каб паспрабаваць.
Мадальны загаловак
I will not close if you click outside me. Don't even try to press escape key.
Пракрутка доўгага кантэнту
Калі мадалы становяцца занадта доўгімі для вобласці прагляду або прылады карыстальніка, яны пракручваюцца незалежна ад самой старонкі. Паспрабуйце дэманстрацыю ніжэй, каб зразумець, што мы маем на ўвазе.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Вы таксама можаце стварыць пракручвальны мадальны, які дазваляе пракручваць мадальнае цела, дадаючы .modal-dialog-scrollableда .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Падказкі і ўсплывальныя падказкі
Усплывальныя падказкі і ўсплывальныя вобразы можна размясціць у межах мадалаў пры неабходнасці. Пры закрыцці мадалаў любыя ўсплывальныя падказкі і ўсплывальныя вокны таксама аўтаматычна адхіляюцца.
Выкарыстоўвайце сеткавую сістэму Bootstrap у мадальным выглядзе, укладваючы .container-fluidў .modal-body. Затым выкарыстоўвайце нармальныя класы сеткі, як і ў любым іншым месцы.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Вар'іраванне мадальнага зместу
У вас ёсць куча кнопак, якія запускаюць адзін і той жа рэжым з трохі розным зместам? Выкарыстоўвайце атрыбуты HTML (магчыма, event.relatedTargetпраз jQuery ), каб змяняць змесціва мадальнага элемента ў залежнасці ад таго, якая кнопка была націснута.data-*
Ніжэй жывая дэманстрацыя з прыкладамі HTML і JavaScript. Для атрымання дадатковай інфармацыі прачытайце дакументы па мадальным падзеям , каб даведацца больш пра relatedTarget.
New message
Змяніць анімацыю
Пераменная вызначае стан $modal-fade-transformтрансфармацыі .modal-dialogперад мадальнай анімацыяй з плынню, $modal-show-transformзменная вызначае трансфармацыю .modal-dialogў канцы мадальнай анімацыі з плынню.
Калі вы хочаце, напрыклад, павялічыць анімацыю, вы можаце ўсталяваць $modal-fade-transform: scale(.8).
Выдаліць анімацыю
Для мадалаў, якія проста з'яўляюцца, а не знікаюць для прагляду, выдаліце .fadeклас з вашай мадальнай разметкі.
Дынамічныя вышыні
Калі вышыня мадалю змяняецца, пакуль ён адкрыты, вы павінны выклікаць $('#myModal').modal('handleUpdate'), каб адрэгуляваць пазіцыю мадала ў выпадку з'яўлення паласы пракруткі.
Даступнасць
Не забудзьцеся дадаць role="dialog"і aria-labelledby="...", спасылаючыся на мадальны загаловак, да .modalі role="document"да самога .modal-dialogсябе. Акрамя таго, вы можаце даць апісанне вашага мадальнага дыялогу з aria-describedbyon .modal.
Ўбудаванне відэа YouTube
Убудаванне відэа YouTube у мадальныя формы патрабуе дадатковага JavaScript не ў Bootstrap для аўтаматычнай прыпынку прайгравання і шмат іншага. Глядзіце гэты карысны пост Stack Overflow для атрымання дадатковай інфармацыі.
Дадатковыя памеры
У мадалаў ёсць тры неабавязковыя памеры, даступныя праз класы-мадыфікатары для размяшчэння на .modal-dialog. Гэтыя памеры ўзнікаюць у пэўных кропках разрыву, каб пазбегнуць гарызантальных палос пракруткі ў вузкіх акнах прагляду.
Памер
Клас
Мадальная максімальная шырыня
Маленькі
.modal-sm
300px
Па змаўчанні
Няма
500px
Вялікі
.modal-lg
800px
Вельмі вялікі
.modal-xl
1140px
Наш стандартны мадальны клас без мадыфікатара ўяўляе сабой мадальны "сярэдняга" памеру.
Extra large modal
...
Large modal
...
Small modal
...
Выкарыстанне
Мадальны плагін пераключае ваш схаваны кантэнт па патрабаванні праз атрыбуты дадзеных або JavaScript. Гэта таксама дадае .modal-openда <body>перавызначэння паводзін пракруткі па змаўчанні і стварае .modal-backdropвобласць пстрычкі для адхілення паказаных мадалаў пры пстрычцы па-за межамі мадальнасці.
Праз атрыбуты дадзеных
Актывуйце мадальны без напісання JavaScript. Усталюйце data-toggle="modal"элемент кантролера, напрыклад кнопку, разам з data-target="#foo"або href="#foo", каб нацэліць на пэўны мадаль для пераключэння.
Праз JavaScript
Выклік мадальнага з ідэнтыфікатарам myModalз дапамогай аднаго радка JavaScript:
Параметры
Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-backdrop="".
Імя
Тып
Па змаўчанні
Апісанне
заднік
лагічны або радок'static'
праўда
Уключае элемент мадальнага фону. У якасці альтэрнатывы ўкажыце staticдля фону, які не закрывае мадальнае поле пры пстрычцы або націску клавішы выхаду.
клавіятура
лагічны
праўда
Закрывае мадальнае, калі націснута клавіша выхаду
фокус
лагічны
праўда
Пры ініцыялізацыі акцэнтуе ўвагу на мадальным.
паказаць
лагічны
праўда
Паказвае мадальнае пры ініцыялізацыі.
Метады
Асінхронныя метады і пераходы
Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .
Актывуе ваш кантэнт як мадальны. Прымае дадатковыя параметры object.
.modal('toggle')
Уручную пераключае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр будзе паказаны або схаваны (г.зн. да таго , як адбудзецца падзея shown.bs.modalабо ).hidden.bs.modal
.modal('show')
Уручную адкрывае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр быў фактычна паказаны (г.зн. да таго , як shown.bs.modalадбудзецца падзея).
.modal('hide')
Уручную хавае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр быў фактычна схаваны (г.зн. да таго, як hidden.bs.modalадбылася падзея).
.modal('handleUpdate')
Уручную адрэгулюйце пазіцыю мадаля, калі вышыня мадала змяняецца, калі ён адкрыты (напрыклад, калі з'яўляецца паласа пракруткі).
.modal('dispose')
Знішчае мадальнасць элемента.
Падзеі
Мадальны клас Bootstrap паказвае некалькі падзей для падключэння да мадальнай функцыянальнасці. Усе мадальныя падзеі запускаюцца ў сам мадальны (г.зн. у <div class="modal">).
Тып падзеі
Апісанне
show.bs.modal
Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка. Калі гэта выклікана пстрычкай, націснуты элемент даступны як relatedTargetуласцівасць падзеі.
паказаны.bs.modal
Гэта падзея запускаецца, калі мадальны элемент становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS). Калі гэта выклікана пстрычкай, націснуты элемент даступны як relatedTargetуласцівасць падзеі.
hide.bs.modal
Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
схаваны.bs.мадальны
Гэта падзея запускаецца, калі мадальны элемент перастае быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hidePrevented.bs.modal
Гэта падзея запускаецца, калі паказаны мадальны, яго фон staticі пстрычка па-за мадальным або націсканне клавішы выхаду.