Source

மாதிரி

லைட்பாக்ஸ்கள், பயனர் அறிவிப்புகள் அல்லது முற்றிலும் தனிப்பயன் உள்ளடக்கத்திற்கான உரையாடல்களை உங்கள் தளத்தில் சேர்க்க பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்ட் மாதிரி செருகுநிரலைப் பயன்படுத்தவும்.

எப்படி இது செயல்படுகிறது

பூட்ஸ்டார்ப்பின் மாதிரி கூறுகளுடன் தொடங்குவதற்கு முன், எங்கள் மெனு விருப்பங்கள் சமீபத்தில் மாறிவிட்டதால், பின்வருவனவற்றைப் படிக்க மறக்காதீர்கள்.

மாதிரிகள் HTML, CSS மற்றும் JavaScript உடன் கட்டமைக்கப்பட்டுள்ளன. அவை ஆவணத்தில் உள்ள எல்லாவற்றிலும் நிலைநிறுத்தப்பட்டு, ஸ்க்ரோலில் இருந்து ஸ்க்ரோலை அகற்றி, <body>அதற்குப் பதிலாக மாதிரி உள்ளடக்கம் உருட்டும்.
மாதிரி "பின்னணியில்" கிளிக் செய்தால், தானாக மாதிரி மூடப்படும்.
பூட்ஸ்ட்ராப் ஒரு நேரத்தில் ஒரு மாதிரி சாளரத்தை மட்டுமே ஆதரிக்கிறது. உள்ளமைக்கப்பட்ட மாதிரிகள் ஆதரிக்கப்படாது, ஏனெனில் அவை மோசமான பயனர் அனுபவங்கள் என்று நாங்கள் நம்புகிறோம்.
மாதிரிகள் பயன்படுத்துகின்றன position: fixed, இது சில நேரங்களில் அதன் ரெண்டரிங் பற்றி சற்று குறிப்பிட்டதாக இருக்கலாம். முடிந்த போதெல்லாம், மற்ற உறுப்புகளிலிருந்து சாத்தியமான குறுக்கீடுகளைத் தவிர்க்க, உங்கள் மாதிரி HTML ஐ உயர்நிலை நிலையில் வைக்கவும். .modalமற்றொரு நிலையான உறுப்புக்குள் கூடு கட்டும்போது நீங்கள் சிக்கல்களைச் சந்திக்க நேரிடும் .
மீண்டும், காரணமாக, position: fixedமொபைல் சாதனங்களில் மாடல்களைப் பயன்படுத்துவதில் சில எச்சரிக்கைகள் உள்ளன. விவரங்களுக்கு எங்கள் உலாவி ஆதரவு ஆவணத்தைப் பார்க்கவும்.
HTML5 அதன் சொற்பொருளை எவ்வாறு வரையறுக்கிறது என்பதன் காரணமாக , autofocusHTML பண்புக்கூறு பூட்ஸ்டார்ப் மாதிரிகளில் எந்த விளைவையும் ஏற்படுத்தாது. அதே விளைவை அடைய, சில தனிப்பயன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்:

$('#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-*பண்புக்கூறுகள் (ஒருவேளை jQuery வழியாக இருக்கலாம்) பயன்படுத்தவும்.

கீழே ஒரு நேரடி டெமோ உள்ளது, அதைத் தொடர்ந்து 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="...", மாடல் தலைப்பைக் குறிப்பிடுவது, க்கு .modal, மற்றும் அதனுடன் சேர்க்க role="document"வேண்டும் .modal-dialog. கூடுதலாக, உங்கள் மாதிரி உரையாடலின் விளக்கத்தை on உடன் aria-describedbyகொடுக்கலாம் .modal.

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>

ஜாவாஸ்கிரிப்ட் வழியாக

myModalஜாவாஸ்கிரிப்ட்டின் ஒற்றை வரியுடன் ஐடியுடன் ஒரு மாதிரியை அழைக்கவும் :

$('#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.மாதிரி	`show`நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது . ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு `relatedTarget`நிகழ்வின் சொத்தாகக் கிடைக்கும்.
காட்டப்பட்டுள்ளது.பிஎஸ்.மாதிரி	மாடல் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்). ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு `relatedTarget`நிகழ்வின் சொத்தாகக் கிடைக்கும்.
hide.bs.modal	`hide`நிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.bs.மாதிரி	மாடல் பயனரிடமிருந்து மறைத்து முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

மாதிரி

எப்படி இது செயல்படுகிறது

எடுத்துக்காட்டுகள்