Source

මාදිලිය

ආලෝක පෙට්ටි, පරිශීලක දැනුම්දීම්, හෝ සම්පූර්ණයෙන්ම අභිරුචි අන්තර්ගතයන් සඳහා ඔබේ වෙබ් අඩවියට සංවාද එක් කිරීමට Bootstrap හි JavaScript මාදිලි ප්ලගිනය භාවිතා කරන්න.

එය ක්රියා කරන ආකාරය

Bootstrap හි මොඩල් සංරචකය සමඟ ආරම්භ කිරීමට පෙර, අපගේ මෙනු විකල්ප මෑතකදී වෙනස් වී ඇති බැවින් පහත සඳහන් දෑ කියවීමට වග බලා ගන්න.

මාදිලි HTML, CSS සහ JavaScript සමඟ ගොඩනගා ඇත. <body>ඒවා ලේඛනයේ ඇති අනෙක් සියල්ල මත ස්ථානගත කර ඇති අතර ඒ වෙනුවට මොඩල් අන්තර්ගතය අනුචලනය වන පරිදි අනුචලනය ඉවත් කරන්න .
මාදිලියේ "පසුබිම" මත ක්ලික් කිරීමෙන් මාදිලිය ස්වයංක්රීයව වසා දමයි.
බූට්ස්ට්‍රැප් එක වරකට සහය දක්වන්නේ එක් මාදිලි කවුළුවකට පමණි. Nested modals දුර්වල පරිශීලක අත්දැකීම් ලෙස අප විශ්වාස කරන බැවින් ඒවාට සහය නොදක්වයි.
Modals භාවිතා කරයි position: fixed, සමහර විට එහි විදැහුම්කරණය ගැන ටිකක් විශේෂිත විය හැක. හැකි සෑම විටම, වෙනත් මූලද්‍රව්‍යවලින් විය හැකි මැදිහත්වීම් වළක්වා ගැනීම සඳහා ඔබේ මාදිලියේ HTML ඉහළ මට්ටමේ ස්ථානයක තබන්න. .modalවෙනත් ස්ථාවර මූලද්‍රව්‍යයක් තුළ කැදලි තැබීමේදී ඔබට ගැටලුවලට මුහුණ දීමට සිදුවනු ඇත .
නැවත වරක්, නිසා position: fixed, ජංගම උපාංගවල මාදිලි භාවිතා කිරීමේදී යම් යම් අනතුරු ඇඟවීම් තිබේ. විස්තර සඳහා අපගේ බ්‍රවුසර ආධාරක ලේඛනය බලන්න.
HTML5 එහි අර්ථ ශාස්ත්‍රය නිර්වචනය කරන ආකාරය හේතුවෙන්, HTML autofocusගුණාංගය Bootstrap modals වල බලපෑමක් නැත. එකම බලපෑම ලබා ගැනීම සඳහා, සමහර අභිරුචි JavaScript භාවිතා කරන්න:

$('#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>

මෙවලම් ඉඟි සහ popovers

මෙවලම් ඉඟි සහ පොපෝවර් අවශ්‍ය පරිදි ආකෘති තුළ තැබිය හැකිය. මාදිලි වසා ඇති විට, ඇතුළත ඇති ඕනෑම මෙවලම් ඉඟි සහ popovers ද ස්වයංක්‍රීයව ඉවත දමනු ලැබේ.

<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>

තරමක් වෙනස් අන්තර්ගතයන් සහිත එකම මාදිලිය ක්‍රියාරම්භ කරන බොත්තම් පොකුරක් තිබේද? ක්ලික් කළ බොත්තම මත පදනම්ව මොඩලයේ අන්තර්ගතය වෙනස් කිරීමට HTML ගුණාංග (සමහර විට jQuery හරහා ) භාවිතා කරන්න event.relatedTarget.data-*

පහත දැක්වෙන්නේ HTML සහ JavaScript වැනි සජීවී ආදර්ශනයකි. වැඩි විස්තර සඳහා, විස්තර සඳහා ආකෘති සිදුවීම් ලේඛන කියවන්න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 වීඩියෝ කාවැද්දීම

යූ ටියුබ් වීඩියෝ මාදිලිවල කාවැද්දීමට ස්වයංක්‍රීයව නැවත ධාවනය සහ තවත් දේ නැවැත්වීමට අමතර ජාවාස්ක්‍රිප්ට් බූට්ස්ට්‍රැප් තුළ අවශ්‍ය වේ. වැඩි විස්තර සඳහා මෙම ප්‍රයෝජනවත් Stack Overflow පෝස්ට් බලන්න .

විකල්ප ප්රමාණ

මාදිලිවලට විකල්ප ප්‍රමාණ දෙකක් ඇත, ඒවා මත තැබීමට විකරණකාරක පන්ති හරහා ලබා ගත හැකිය .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>

JavaScript හරහා

myModalජාවාස්ක්‍රිප්ට් එක පේළියක් සහිත හැඳුනුම්පතක් සහිත මාදිලියක් අමතන්න :

$('#myModal').modal(options)

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-backdrop="".

නම	ටයිප් කරන්න	පෙරනිමිය	විස්තර
පසුබිම	boolean හෝ string`'static'`	සැබෑ	මාදිලි පසුබිම් මූලද්‍රව්‍යයක් ඇතුළත් වේ. විකල්පයක් ලෙස, `static`ක්ලික් කිරීමේදී මාදිලිය වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න.
යතුරු පුවරුව	බූලියන්	සැබෑ	ගැලවීමේ යතුර එබූ විට මාදිලිය වසා දමයි
අවධානය යොමු කරන්න	බූලියන්	සැබෑ	ආරම්භ කරන විට මාදිලිය වෙත අවධානය යොමු කරයි.
පෙන්වන්න	බූලියන්	සැබෑ	ආරම්භ කළ විට මාදිලිය පෙන්වයි.

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න.

`.modal(options)`

ඔබේ අන්තර්ගතය මාදිලියක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

මාදිලියක් අතින් ටොගල් කරයි. මාදිලිය ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීම හෝ සිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ.shown.bs.modalhidden.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')`

මූලද්රව්යයක මාදිලිය විනාශ කරයි.

සිදුවීම්

Bootstrap's modal class මගින් මාදිලියේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි. සියලුම මාදිලියේ සිදුවීම් මාදිලියේම (එනම් හිදී <div class="modal">) වෙඩි තබා ඇත.

සිදුවීම් වර්ගය	විස්තර
show.bs.modal	`show`නිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ. ක්ලික් කිරීමකින් ඇතිවූයේ නම්, ක්ලික් කළ මූලද්‍රව්‍යය `relatedTarget`සිදුවීමේ දේපල ලෙස පවතී.
පෙන්වා ඇත.bs.modal	මාදිලිය පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). ක්ලික් කිරීමකින් ඇතිවූයේ නම්, ක්ලික් කළ මූලද්‍රව්‍යය `relatedTarget`සිදුවීමේ දේපල ලෙස පවතී.
hide.bs.modal	`hide`නිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවුණු.bs.modal	මාදිලිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (CSS සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).

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