Source

مۆداڵی

پێوەکراوەکەی مۆداڵی جاڤاسکڕێپتی Bootstrap بەکاربهێنە بۆ زیادکردنی دیالۆگەکان بۆ ماڵپەڕەکەت بۆ لایت بۆکس، ئاگادارکردنەوەی بەکارهێنەر، یان ناوەڕۆکی تەواو تایبەتمەند.

چۆن کاردەکات

پێش ئەوەی دەست بکەیت بە پێکهاتەی مۆداڵی Bootstrap، دڵنیابە ئەمانەی خوارەوە بخوێنیتەوە چونکە هەڵبژاردەکانی مینیومان بەم دواییە گۆڕاون.

  • مۆداڵەکان بە HTML و CSS و JavaScript دروست دەکرێن. ئەوان لەسەر هەموو شتێکی تر لە بەڵگەنامەکەدا دانراون و سکڕۆڵەکە لادەبەن بۆ <body>ئەوەی ناوەڕۆکی مۆداڵی لەبری ئەوە سکڕۆڵ بکات.
  • کلیککردن لەسەر مۆداڵی “backdrop” بە شێوەیەکی ئۆتۆماتیکی مۆداڵەکە دادەخات.
  • Bootstrap تەنها پشتگیری لە یەک پەنجەرەی مۆداڵی دەکات لە یەک کاتدا. مۆداڵی هێلانەکراو پشتگیری ناکرێت چونکە ئێمە پێمان وایە ئەزموونی بەکارهێنەری خراپە.
  • مۆداڵەکان position: fixed, بەکاردەهێنن کە هەندێک جار دەتوانێت کەمێک تایبەت بێت سەبارەت بە ڕەندەرکردنی. هەرکاتێک کە دەتوانیت، HTML مۆداڵیەکەت لە شوێنێکی ئاست بەرزدا دابنێ بۆ ئەوەی دەستێوەردانی ئەگەری توخمەکانی تر نەبێت. بە ئەگەرێکی زۆرەوە تووشی کێشە دەبیت کاتێک هێلانەکردنی a .modalلەناو توخمێکی جێگیرێکی تردا.
  • جارێکی تر بەهۆی position: fixed, هەندێک ئاگادارکردنەوە هەیە لەگەڵ بەکارهێنانی مۆداڵەکان لەسەر ئامێرە مۆبایلەکان. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی پشتگیری وێبگەڕەکەمان بکە.
  • بەهۆی چۆنێتی پێناسەکردنی HTML5 ماناکانی، تایبەتمەندی autofocusHTML هیچ کاریگەرییەکی نییە لە مۆداڵی Bootstrap. بۆ بەدەستهێنانی هەمان کاریگەری، هەندێک جاڤاسکڕێپتی تایبەت بەکاربهێنە:
$('#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>

بەکارهێنانی تۆڕەکە

بەکارهێنانی سیستەمی تۆڕی Bootstrap لەناو مۆداڵێکدا بە هێلانەکردن .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و HTMLdata-* (ڕەنگە لە ڕێگەی 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خۆی. سەرەڕای ئەوە، دەتوانیت وەسفێک لە دیالۆگی مۆداڵی خۆت بدەیت بە aria-describedbyon .modal.

جێگیرکردنی ڤیدیۆکانی یوتیوب

جێگیرکردنی ڤیدیۆکانی یوتیوب لە مۆداڵەکاندا پێویستی بە جاڤاسکڕێپتی زیادە هەیە کە لە بووتستراپدا نەبێت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی پەخشکردنەکە بوەستێنێت و زۆر شتی تر. بۆ زانیاری زیاتر سەیری ئەم پۆستە یارمەتیدەرەی 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>

لە ڕێگەی جاڤاسکڕێپتەوە

بانگی مۆداڵێک بکە بە id myModalبە یەک دێڕی جاڤاسکڕێپت:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-backdrop="".

ناو جۆر بنەڕەتی وەسف
باکگراوند boolean یان ڕیزەکە'static' ڕاست توخمێکی مۆداڵی-باکگراوند لەخۆدەگرێت. یانیش staticبۆ باکگراوندێک دیاری بکە کە مۆداڵی لەسەر کلیککردن داناخات.
کیبۆرد boolean ڕاست مۆداڵی دادەخات کاتێک کلیلی escape دەکرێت
جەخت boolean ڕاست فۆکەس دەخاتە سەر مۆداڵی کاتێک دەستپێدەکات.
نیشاندان boolean ڕاست مۆداڵی نیشان دەدات کاتێک دەستپێدەکات.

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی 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تایبەتمەندی ڕووداوەکە بەردەستە.
شاردنەوە.bs.modal ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
شاراوە.bs.modal ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوان دەکات تا گواستنەوەکانی CSS تەواو دەبن). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})