Source

మోడల్

లైట్‌బాక్స్‌లు, వినియోగదారు నోటిఫికేషన్‌లు లేదా పూర్తిగా అనుకూల కంటెంట్ కోసం మీ సైట్‌కు డైలాగ్‌లను జోడించడానికి బూట్‌స్ట్రాప్ యొక్క జావాస్క్రిప్ట్ మోడల్ ప్లగ్ఇన్‌ని ఉపయోగించండి.

అది ఎలా పని చేస్తుంది

బూట్‌స్ట్రాప్ మోడల్ కాంపోనెంట్‌తో ప్రారంభించడానికి ముందు, మా మెను ఎంపికలు ఇటీవల మారినందున కింది వాటిని తప్పకుండా చదవండి.

  • మోడల్స్ HTML, CSS మరియు JavaScriptతో నిర్మించబడ్డాయి. వారు డాక్యుమెంట్‌లోని మిగతా వాటిపై ఉంచారు మరియు <body>మోడల్ కంటెంట్ స్క్రోల్ చేయడానికి బదులుగా స్క్రోల్‌ను తీసివేయండి.
  • మోడల్ "బ్యాక్‌డ్రాప్"పై క్లిక్ చేయడం వలన మోడల్ స్వయంచాలకంగా మూసివేయబడుతుంది.
  • బూట్‌స్ట్రాప్ ఒక సమయంలో ఒక మోడల్ విండోకు మాత్రమే మద్దతు ఇస్తుంది. నెస్టెడ్ మోడల్‌లు పేలవమైన వినియోగదారు అనుభవాలు అని మేము విశ్వసిస్తున్నందున వాటికి మద్దతు లేదు.
  • మోడల్స్ ఉపయోగిస్తాయి position: fixed, ఇది కొన్నిసార్లు దాని రెండరింగ్ గురించి కొంచెం ప్రత్యేకంగా ఉంటుంది. సాధ్యమైనప్పుడల్లా, ఇతర మూలకాల నుండి సంభావ్య జోక్యాన్ని నివారించడానికి మీ మోడల్ HTMLని ఉన్నత-స్థాయి స్థానంలో ఉంచండి. .modalమరొక స్థిర మూలకంలో గూడు కట్టినప్పుడు మీరు సమస్యలను ఎదుర్కొనే అవకాశం ఉంది.
  • మరోసారి, కారణంగా position: fixed, మొబైల్ పరికరాల్లో మోడల్‌లను ఉపయోగించడంలో కొన్ని జాగ్రత్తలు ఉన్నాయి. వివరాల కోసం మా బ్రౌజర్ సపోర్ట్ డాక్స్ చూడండి.
  • HTML5 దాని సెమాంటిక్స్‌ను ఎలా నిర్వచిస్తుంది అనే కారణంగా, HTML autofocusలక్షణం బూట్‌స్ట్రాప్ మోడల్‌లలో ఎటువంటి ప్రభావాన్ని చూపదు. అదే ప్రభావాన్ని సాధించడానికి, కొన్ని అనుకూల జావాస్క్రిప్ట్‌ని ఉపయోగించండి:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

డెమోలు మరియు వినియోగ మార్గదర్శకాల కోసం చదువుతూ ఉండండి.

ఉదాహరణలు

క్రింద ఒక స్టాటిక్ మోడల్ ఉదాహరణ (దీని అర్థం positionమరియు displayభర్తీ చేయబడింది). మోడల్ హెడర్, మోడల్ బాడీ (దీనికి అవసరం padding) మరియు మోడల్ ఫుటర్ (ఐచ్ఛికం) ఉన్నాయి. సాధ్యమైనప్పుడల్లా తొలగింపు చర్యలతో మోడల్ హెడర్‌లను చేర్చమని లేదా మరొక స్పష్టమైన తొలగింపు చర్యను అందించమని మేము మిమ్మల్ని అడుగుతున్నాము.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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">&times;</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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

నిలువుగా కేంద్రీకృతమై ఉంది

మోడల్‌ను నిలువుగా మధ్యలోకి జోడించండి .modal-dialog-centered..modal-dialog

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లు

టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లను అవసరమైన విధంగా మోడల్‌లలో ఉంచవచ్చు. మోడల్స్ మూసివేయబడినప్పుడు, లోపల ఏవైనా టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లు కూడా స్వయంచాలకంగా తీసివేయబడతాయి.

<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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)
})

యానిమేషన్‌ను తీసివేయండి

వీక్షించడానికి ఫేడ్ కాకుండా కనిపించే మోడల్స్ కోసం, .fadeమీ మోడల్ మార్కప్ నుండి తరగతిని తీసివేయండి.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

డైనమిక్ ఎత్తులు

మోడల్ తెరిచినప్పుడు దాని ఎత్తు $('#myModal').modal('handleUpdate')మారినట్లయితే, స్క్రోల్‌బార్ కనిపిస్తే మోడల్ స్థానాన్ని మళ్లీ సర్దుబాటు చేయడానికి మీరు కాల్ చేయాలి.

సౌలభ్యాన్ని

మోడల్ టైటిల్‌ను సూచిస్తూ, కు , మరియు role="dialog"దానికే జోడించాలని నిర్ధారించుకోండి . అదనంగా, మీరు న తో మీ మోడల్ డైలాగ్ యొక్క వివరణను ఇవ్వవచ్చు .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube వీడియోలను పొందుపరచడం

మోడల్స్‌లో YouTube వీడియోలను పొందుపరచడానికి ప్లేబ్యాక్ మరియు మరిన్నింటిని స్వయంచాలకంగా ఆపడానికి బూట్‌స్ట్రాప్‌లో కాకుండా అదనపు జావాస్క్రిప్ట్ అవసరం. మరింత సమాచారం కోసం ఈ సహాయకరమైన స్టాక్ ఓవర్‌ఫ్లో పోస్ట్‌ను చూడండి .

ఐచ్ఛిక పరిమాణాలు

మోడల్‌లు రెండు ఐచ్ఛిక పరిమాణాలను కలిగి ఉంటాయి, వీటిని ఒకపై ఉంచడానికి మాడిఫైయర్ తరగతుల ద్వారా అందుబాటులో ఉంటాయి .modal-dialog. ఇరుకైన వీక్షణపోర్ట్‌లలో క్షితిజ సమాంతర స్క్రోల్‌బార్‌లను నివారించడానికి ఈ పరిమాణాలు నిర్దిష్ట బ్రేక్‌పాయింట్‌ల వద్ద ప్రారంభమవుతాయి.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</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>

జావాస్క్రిప్ట్ ద్వారా

myModalJavaScript యొక్క ఒకే లైన్‌తో 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 పరివర్తనాలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})