Source

موډل

د بوټسټریپ جاواسکریپټ ماډل پلگ ان وکاروئ ترڅو خپل سایټ ته د لایټ بکسونو ، کارونکي خبرتیاو ، یا په بشپړ ډول دودیز مینځپانګې لپاره ډیالوګونه اضافه کړئ.

څنګه کار کوي

مخکې لدې چې د بوټسټریپ موډل برخې سره پیل وکړئ ، ډاډ ترلاسه کړئ چې لاندې ولولئ ځکه چې زموږ د مینو اختیارونه پدې وروستیو کې بدل شوي.

  • موډلونه د HTML، CSS، او JavaScript سره جوړ شوي دي. دوی په سند کې د هرڅه په پرتله موقعیت لري او له دې څخه سکرول لرې کوي <body>ترڅو د ماډل مینځپانګې سکرول پرځای وي.
  • په موډل "بیاکډراپ" کلیک کول به په اوتومات ډول موډل بند کړي.
  • بوټسټریپ یوازې په یو وخت کې د یوې موډل کړکۍ ملاتړ کوي. نیسټ شوي ماډلونه نه ملاتړ کیږي ځکه چې موږ باور لرو چې دا د کارونکي ضعیف تجربې دي.
  • موډلونه کاروي position: fixed، کوم چې ځینې وختونه د هغې د وړاندې کولو په اړه یو څه ځانګړي کیدی شي. هرکله چې امکان ولري، خپل ماډل HTML په لوړ پوړ کې ځای په ځای کړئ ترڅو د نورو عناصرو احتمالي مداخلې څخه مخنیوی وشي. تاسو به احتمال له ستونزو سره مخ شئ کله چې .modalد بل ثابت عنصر دننه ځړول وکړئ.
  • یوځل بیا ، له امله position: fixed، په ګرځنده وسیلو کې د ماډلونو کارولو سره ځینې احتیاطونه شتون لري. د جزیاتو لپاره زموږ د براوزر ملاتړ سندونه وګورئ.
  • د دې له امله چې څنګه HTML5 خپل سیمانټیکونه تعریفوي، د autofocusHTML ځانګړتیا د بوټسټراپ ماډلونو کې هیڅ اغیزه نلري. د ورته تاثیر ترلاسه کولو لپاره ، ځینې دودیز جاواسکریپټ وکاروئ:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

د ډیمو او کارولو لارښودونو لوستلو ته دوام ورکړئ.

مثالونه

لاندې د جامد ماډل بیلګه ده (د دې معنی لري 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-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" 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="exampleModalCenterTitle">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>

وسیلې او پاپورونه

Tooltips او 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)
})

حرکت بدل کړئ

متغیر د موډل فیډ ان انیمیشن څخه مخکې $modal-fade-transformد بدلون حالت ټاکي، متغیر د موډل فیډ ان انیمیشن په پای کې د بدلون ټاکي ..modal-dialog$modal-show-transform.modal-dialog

که تاسو د مثال په توګه د زوم انیمیشن غواړئ، تاسو کولی شئ تنظیم کړئ $modal-fade-transform: scale(.8).

حرکت لرې کړئ

د موډلونو لپاره چې د لیدلو لپاره د تیاره کیدو پرځای په ساده ډول څرګندیږي ، .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. aria-describedbyبرسیره پردې، تاسو کولی شئ د خپل موډل ډیالوګ په اړه توضیحات ورکړئ .modal.

د یوټیوب ویډیوګانې شاملول

په موډلونو کې د یوټیوب ویډیوګانو ځای په ځای کول اضافي جاوا سکریپټ ته اړتیا لري نه په بوټسټریپ کې ترڅو په اتوماتيک ډول پلے بیک بند کړي او نور ډیر څه. د نورو معلوماتو لپاره دا ګټور سټیک اوور فلو پوسټ وګورئ .

اختیاري اندازه

موډلونه درې اختیاري اندازې لري چې د ترمیم کونکي ټولګیو له لارې شتون لري چې په .modal-dialog. دا اندازې په ځانګړو وقفو ځایونو کې کیک کوي ترڅو په تنګ لید پورټونو کې د افقی سکرولبارونو مخه ونیسي.

اندازه ټولګي موډل اعظمي - عرض
کوچنی .modal-sm 300px
ډیفالټ هیڅ نه 500px
لوی .modal-lg 800px
ډیر لوی .modal-xl 1140px

زموږ د ډیفالټ ماډل پرته د ترمیم کونکي ټولګي د "منځنۍ" اندازې ماډل تشکیلوي.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

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

<!-- 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د جاواسکریپټ د یوې کرښې سره د 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.modal دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTargetد پیښې ملکیت په توګه شتون لري.
hide.bs.modal دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.modal دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})