మోడల్
లైట్బాక్స్లు, వినియోగదారు నోటిఫికేషన్లు లేదా పూర్తిగా అనుకూల కంటెంట్ కోసం మీ సైట్కు డైలాగ్లను జోడించడానికి బూట్స్ట్రాప్ యొక్క జావాస్క్రిప్ట్ మోడల్ ప్లగ్ఇన్ని ఉపయోగించండి.
అది ఎలా పని చేస్తుంది
బూట్స్ట్రాప్ మోడల్ కాంపోనెంట్తో ప్రారంభించడానికి ముందు, మా మెను ఎంపికలు ఇటీవల మారినందున కింది వాటిని తప్పకుండా చదవండి.
- మోడల్స్ HTML, CSS మరియు JavaScriptతో నిర్మించబడ్డాయి. వారు డాక్యుమెంట్లోని మిగతా వాటిపై ఉంచారు మరియు
<body>
మోడల్ కంటెంట్ స్క్రోల్ చేయడానికి బదులుగా స్క్రోల్ను తీసివేయండి. - మోడల్ "బ్యాక్డ్రాప్"పై క్లిక్ చేయడం వలన మోడల్ స్వయంచాలకంగా మూసివేయబడుతుంది.
- బూట్స్ట్రాప్ ఒక సమయంలో ఒక మోడల్ విండోకు మాత్రమే మద్దతు ఇస్తుంది. నెస్టెడ్ మోడల్లు పేలవమైన వినియోగదారు అనుభవాలు అని మేము విశ్వసిస్తున్నందున వాటికి మద్దతు లేదు.
- మోడల్స్ ఉపయోగిస్తాయి
position: fixed
, ఇది కొన్నిసార్లు దాని రెండరింగ్ గురించి కొంచెం ప్రత్యేకంగా ఉంటుంది. సాధ్యమైనప్పుడల్లా, ఇతర మూలకాల నుండి సంభావ్య జోక్యాన్ని నివారించడానికి మీ మోడల్ HTMLని ఉన్నత-స్థాయి స్థానంలో ఉంచండి..modal
మరొక స్థిర మూలకంలో గూడు కట్టినప్పుడు మీరు సమస్యలను ఎదుర్కొనే అవకాశం ఉంది. - మరోసారి, కారణంగా
position: fixed
, మొబైల్ పరికరాల్లో మోడల్లను ఉపయోగించడంలో కొన్ని జాగ్రత్తలు ఉన్నాయి. వివరాల కోసం మా బ్రౌజర్ సపోర్ట్ డాక్స్ చూడండి. - HTML5 దాని సెమాంటిక్స్ను ఎలా నిర్వచిస్తుంది అనే కారణంగా, HTML
autofocus
లక్షణం బూట్స్ట్రాప్ మోడల్లలో ఎటువంటి ప్రభావాన్ని చూపదు. అదే ప్రభావాన్ని సాధించడానికి, కొన్ని అనుకూల జావాస్క్రిప్ట్ని ఉపయోగించండి:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
మీడియా ప్రశ్నపై ఆధారపడి ఉంటుంది. మా యాక్సెసిబిలిటీ డాక్యుమెంటేషన్ యొక్క తగ్గిన చలన విభాగాన్ని చూడండి
.
డెమోలు మరియు వినియోగ మార్గదర్శకాల కోసం చదువుతూ ఉండండి.
ఉదాహరణలు
మోడల్ భాగాలు
క్రింద ఒక స్టాటిక్ మోడల్ ఉదాహరణ (దీని అర్థం position
మరియు display
భర్తీ చేయబడింది). మోడల్ హెడర్, మోడల్ బాడీ (దీనికి అవసరం padding
) మరియు మోడల్ ఫుటర్ (ఐచ్ఛికం) ఉన్నాయి. సాధ్యమైనప్పుడల్లా తొలగింపు చర్యలతో మోడల్ హెడర్లను చేర్చమని లేదా మరొక స్పష్టమైన తొలగింపు చర్యను అందించమని మేము మిమ్మల్ని అడుగుతున్నాము.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
ప్రత్యక్ష ప్రదర్శన
దిగువ బటన్ను క్లిక్ చేయడం ద్వారా వర్కింగ్ మోడల్ డెమోను టోగుల్ చేయండి. ఇది క్రిందికి జారిపోతుంది మరియు పేజీ ఎగువ నుండి ఫేడ్ అవుతుంది.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
స్టాటిక్ బ్యాక్డ్రాప్
బ్యాక్డ్రాప్ స్టాటిక్కి సెట్ చేయబడినప్పుడు, మోడల్ వెలుపల క్లిక్ చేసినప్పుడు మూసివేయబడదు. దీన్ని ప్రయత్నించడానికి దిగువ బటన్ను క్లిక్ చేయండి.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
పొడవైన కంటెంట్ని స్క్రోల్ చేస్తోంది
మోడల్లు వినియోగదారు వీక్షణపోర్ట్ లేదా పరికరానికి చాలా పొడవుగా మారినప్పుడు, అవి పేజీ నుండి స్వతంత్రంగా స్క్రోల్ చేయబడతాయి. మేము అర్థం ఏమిటో చూడటానికి దిగువ డెమోని ప్రయత్నించండి.
మీరు జోడించడం ద్వారా మోడల్ బాడీని స్క్రోల్ చేయడానికి అనుమతించే స్క్రోల్ చేయదగిన మోడల్ను కూడా .modal-dialog-scrollable
సృష్టించవచ్చు .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
నిలువుగా కేంద్రీకృతమై ఉంది
మోడల్ను నిలువుగా మధ్యలోకి జోడించండి .modal-dialog-centered
..modal-dialog
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
టూల్టిప్లు మరియు పాప్ఓవర్లు
టూల్టిప్లు మరియు పాప్ఓవర్లను అవసరమైన విధంగా మోడల్లలో ఉంచవచ్చు. మోడల్స్ మూసివేయబడినప్పుడు, లోపల ఏవైనా టూల్టిప్లు మరియు పాప్ఓవర్లు కూడా స్వయంచాలకంగా తీసివేయబడతాయి.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
గ్రిడ్ ఉపయోగించి
బూట్స్ట్రాప్ గ్రిడ్ సిస్టమ్ను మోడల్లో గూడు కట్టడం ద్వారా .container-fluid
ఉపయోగించుకోండి .modal-body
. అప్పుడు, మీరు ఎక్కడైనా చేసే విధంగా సాధారణ గ్రిడ్ సిస్టమ్ తరగతులను ఉపయోగించండి.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
మారుతున్న మోడల్ కంటెంట్
కొద్దిగా భిన్నమైన కంటెంట్లతో ఒకే మోడల్ను ట్రిగ్గర్ చేసే బటన్ల సమూహాన్ని కలిగి ఉన్నారా? event.relatedTarget
ఏ బటన్ను క్లిక్ చేశారనే దాన్ని బట్టి మోడల్లోని కంటెంట్లను మార్చడానికి HTML లక్షణాలను data-*
( బహుశా j క్వెరీ ద్వారా ) ఉపయోగించండి.
క్రింద లైవ్ డెమో ఉంది, దాని తర్వాత ఉదాహరణ HTML మరియు జావాస్క్రిప్ట్. మరింత సమాచారం కోసం, వివరాల కోసం మోడల్ ఈవెంట్స్ డాక్స్ చదవండిrelatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
యానిమేషన్ మార్చండి
మోడల్ ఫేడ్-ఇన్ యానిమేషన్కు ముందు పరివర్తన స్థితిని వేరియబుల్ నిర్ణయిస్తుంది, మోడల్ ఫేడ్-ఇన్ యానిమేషన్ చివరిలో $modal-fade-transform
పరివర్తనను వేరియబుల్ నిర్ణయిస్తుంది ..modal-dialog
$modal-show-transform
.modal-dialog
మీరు ఉదాహరణకు జూమ్-ఇన్ యానిమేషన్ కావాలనుకుంటే, మీరు సెట్ చేయవచ్చు $modal-fade-transform: scale(.8)
.
యానిమేషన్ను తీసివేయండి
వీక్షించడానికి ఫేడ్ కాకుండా కనిపిం���ే మోడల్స్ కోసం, .fade
మీ మోడల్ మార్కప్ నుండి తరగతిని తీసివేయండి.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
డైనమిక్ ఎత్తులు
మోడల్ తెరిచినప్పుడు దాని ఎత్తు $('#myModal').modal('handleUpdate')
మారినట్లయితే, స్క్రోల్బార్ కనిపిస్తే మోడల్ స్థానాన్ని మళ్లీ సర్దుబాటు చేయడానికి మీరు కాల్ చేయాలి.
సౌలభ్యాన్ని
aria-labelledby="..."
మోడల్ శీర్షికను సూచిస్తూ , కు జోడించాలని నిర్ధారించుకోండి .modal
. aria-describedby
అదనంగా, మీరు న తో మీ మోడల్ డైలాగ్ యొక్క వివరణను ఇవ్వవచ్చు .modal
. role="dialog"
మేము ఇప్పటికే జావాస్క్రిప్ట్ ద్వారా జోడించినందున మీరు జోడించాల్సిన అవసరం లేదని గుర్తుంచుకోండి.
YouTube వీడియోలను పొందుపరచడం
మోడల్స్లో YouTube వీడియోలను పొందుపరచడానికి ప్లేబ్యాక్ మరియు మరిన్నింటిని స్వయంచాలకంగా ఆపడానికి బూట్స్ట్రాప్లో కాకుండా అదనపు జావాస్క్రిప్ట్ అవసరం. మరింత సమాచారం కోసం ఈ సహాయకరమైన స్టాక్ ఓవర్ఫ్లో పోస్ట్ను చూడండి .
ఐచ్ఛిక పరిమాణాలు
మోడల్లు మూడు ఐచ్ఛిక పరిమాణాలను కలిగి ఉంటాయి, వీటిని ఒకపై ఉంచడానికి మాడిఫైయర్ తరగతుల ద్వారా అందుబాటులో ఉంటాయి .modal-dialog
. ఇరుకైన వీక్షణపోర్ట్లలో క్షితిజ సమాంతర స్క్రోల్బార్లను నివారించడానికి ఈ పరిమాణాలు నిర్దిష్ట బ్రేక్పాయింట్ల వద్ద ప్రారంభమవుతాయి.
పరిమాణం | తరగతి | మోడల్ గరిష్ట వెడల్పు |
---|---|---|
చిన్నది | .modal-sm |
300px |
డిఫాల్ట్ | ఏదీ లేదు | 500px |
పెద్దది | .modal-lg |
800px |
చాలా పెద్దది | .modal-xl |
1140px |
మాడిఫైయర్ క్లాస్ లేకుండా మా డిఫాల్ట్ మోడల్ "మీడియం" సైజ్ మోడల్గా ఉంటుంది.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
వాడుక
మోడల్ ప్లగ్ఇన్ మీ దాచిన కంటెంట్ను డేటా అట్రిబ్యూట్లు లేదా జావాస్క్రిప్ట్ ద్వారా డిమాండ్పై టోగుల్ చేస్తుంది. ఇది ఓవర్రైడ్ డిఫాల్ట్ స్క్రోలింగ్ ప్రవర్తనకు జోడిస్తుంది .modal-open
మరియు మోడల్ వెలుపల క్లిక్ చేస్తున్నప్పుడు చూపిన మోడల్లను తీసివేయడానికి ఒక క్లిక్ ప్రాంతాన్ని అందించడానికి ఒక ఉత్పత్తి చేస్తుంది.<body>
.modal-backdrop
డేటా లక్షణాల ద్వారా
జావాస్క్రిప్ట్ రాయకుండా మోడల్ని యాక్టివేట్ చేయండి. టోగుల్ చేయడానికి ఒక నిర్దిష్ట మోడల్తో పాటుగా లేదా data-toggle="modal"
ఒక బటన్ వంటి నియంత్రిక మూలకంపై సెట్ చేయండి .data-target="#foo"
href="#foo"
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
జావాస్క్రిప్ట్ ద్వారా
myModal
JavaScript యొక్క ఒకే లైన్తో idతో మోడల్కి కాల్ చేయండి :
$('#myModal').modal(options)
ఎంపికలు
ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్ల కోసం, ఎంపిక పేరును data-
, లో వలె జత చేయండి data-backdrop=""
.
పేరు | టైప్ చేయండి | డిఫాల్ట్ | వివరణ |
---|---|---|---|
నేపథ్యం | బూలియన్ లేదా స్ట్రింగ్'static' |
నిజం | మోడల్-బ్యాక్డ్రాప్ ఎలిమెంట్ను కలిగి ఉంటుంది. ప్రత్యామ్నాయంగా, static క్లిక్లో మోడల్ను మూసివేయని బ్యాక్డ్రాప్ కోసం పేర్కొనండి. |
కీబోర్డ్ | బూలియన్ | నిజం | ఎస్కేప్ కీ నొక్కినప్పుడు మోడల్ను మూసివేస్తుంది |
దృష్టి | బూలియన్ | నిజం | ప్రారంభించినప్పుడు మోడల్పై దృష్టి పెడుతుంది. |
చూపించు | బూలియన్ | నిజం | ప్రారంభించినప్పుడు మోడల్ను చూపుతుంది. |
పద్ధతులు
అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు
అన్ని API పద్ధతులు అసమకాలికమైనవి మరియు పరివర్తనను ప్రారంభిస్తాయి . వారు పరివర్తన ప్రారంభమైన వెంటనే కానీ అది ముగిసేలోపు కాలర్ వద్దకు తిరిగి వస్తారు . అదనంగా, పరివర్తన భాగంపై పద్ధతి కాల్ విస్మరించబడుతుంది .
మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్యుమెంటేషన్ చూడండి .
.modal(options)
మీ కంటెంట్ని మోడల్గా యాక్టివేట్ చేస్తుంది. ఐచ్ఛిక ఎంపికలను అంగీకరిస్తుంది object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
మోడల్ను మాన్యువల్గా టోగుల్ చేస్తుంది. మోడల్ వాస్తవంగా చూపబడటానికి లేదా దాచబడటానికి ముందు కాలర్కి తిరిగి వస్తుంది (అంటే shown.bs.modal
లేదా hidden.bs.modal
సంఘటన జరగడానికి ముందు).
$('#myModal').modal('toggle')
.modal('show')
మాన్యువల్గా మోడల్ను తెరుస్తుంది. మోడల్ వాస్తవంగా చూపబడక ముందే కాలర్కి తిరిగి వస్తుంది (అంటే shown.bs.modal
ఈవెంట్ జరగడానికి ముందు).
$('#myModal').modal('show')
.modal('hide')
మోడల్ను మాన్యువల్గా దాచిపెడుతుంది. మోడల్ వాస్తవంగా దాచబడకముందే (అంటే hidden.bs.modal
ఈవెంట్ జరగడానికి ముందు) కాలర్కి తిరిగి వస్తుంది.
$('#myModal').modal('hide')
.modal('handleUpdate')
మోడల్ తెరిచి ఉన్నప్పుడు దాని ఎత్తు మారితే (అంటే స్క్రోల్బార్ కనిపిస్తే) మోడల్ స్థానాన్ని మాన్యువల్గా సరిదిద్దండి.
$('#myModal').modal('handleUpdate')
.modal('dispose')
మూలకం యొక్క నమూనాను నాశనం చేస్తుంది.
ఈవెంట్స్
బూట్స్ట్రాప్ యొక్క మోడల్ క్లాస్ మోడల్ ఫంక్షనాలిటీకి హుకింగ్ చేయడానికి కొన్ని ఈవెంట్లను బహిర్గతం చేస్తుంది. అన్ని మోడల్ ఈవెంట్లు మోడల్లోనే (అంటే వద్ద <div class="modal">
) కాల్చబడతాయి.
ఈవెంట్ రకం | వివరణ |
---|---|
show.bs.modal | ఇన్స్టెన్స్ మెథడ్ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది show . ఒక క్లిక్ వలన సంభవించినట్లయితే, క్లిక్ చేయబడిన మూలకం relatedTarget ఈవెంట్ యొక్క ఆస్తిగా అందుబాటులో ఉంటుంది. |
చూపబడింది.bs.మోడల్ | మోడల్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది). ఒక క్లిక్ వలన సంభవించినట్లయితే, క్లిక్ చేయబడిన మూలకం relatedTarget ఈవెంట్ యొక్క ఆస్తిగా అందుబాటులో ఉంటుంది. |
hide.bs.modal | hide ఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది . |
దాచిన.bs.మోడల్ | మోడల్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది). |
hidePrevented.bs.modal | మోడల్ చూపబడినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది, దాని బ్యాక్డ్రాప్ static మరియు మోడల్ వెలుపల ఒక క్లిక్ చేయడం లేదా కీబోర్డ్ ఎంపికతో ఎస్కేప్ కీ ప్రెస్ చేయడం లేదా data-keyboard కు సెట్ చేయడం జరుగుతుంది false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})