Source

ਮਾਡਲ

ਲਾਈਟਬਾਕਸ, ਉਪਭੋਗਤਾ ਸੂਚਨਾਵਾਂ, ਜਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮ ਸਮੱਗਰੀ ਲਈ ਆਪਣੀ ਸਾਈਟ ਵਿੱਚ ਡਾਇਲਾਗ ਜੋੜਨ ਲਈ ਬੂਟਸਟਰੈਪ ਦੇ JavaScript ਮਾਡਲ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਕਿਦਾ ਚਲਦਾ

ਬੂਟਸਟਰੈਪ ਦੇ ਮਾਡਲ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਹੇਠਾਂ ਦਿੱਤੇ ਨੂੰ ਪੜ੍ਹਨਾ ਯਕੀਨੀ ਬਣਾਓ ਕਿਉਂਕਿ ਸਾਡੇ ਮੀਨੂ ਵਿਕਲਪ ਹਾਲ ਹੀ ਵਿੱਚ ਬਦਲ ਗਏ ਹਨ।

  • ਮਾਡਲ HTML, CSS, ਅਤੇ JavaScript ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਉਹ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਬਾਕੀ ਸਭ ਕੁਝ ਉੱਤੇ ਸਥਿਤ ਹਨ ਅਤੇ ਇਸ ਤੋਂ ਸਕ੍ਰੌਲ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਨ <body>ਤਾਂ ਜੋ ਇਸ ਦੀ ਬਜਾਏ ਮਾਡਲ ਸਮੱਗਰੀ ਸਕ੍ਰੌਲ ਹੋ ਸਕੇ।
  • ਮਾਡਲ "ਬੈਕਡ੍ਰੌਪ" 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਮਾਡਲ ਆਪਣੇ ਆਪ ਬੰਦ ਹੋ ਜਾਵੇਗਾ।
  • ਬੂਟਸਟਰੈਪ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਮਾਡਲ ਵਿੰਡੋ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਨੇਸਟਡ ਮੋਡਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ ਕਿਉਂਕਿ ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਮਾੜੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਮੰਨਦੇ ਹਾਂ।
  • ਮਾਡਲਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ position: fixed, ਜੋ ਕਈ ਵਾਰ ਇਸਦੀ ਰੈਂਡਰਿੰਗ ਬਾਰੇ ਥੋੜਾ ਖਾਸ ਹੋ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਦੂਜੇ ਤੱਤਾਂ ਤੋਂ ਸੰਭਾਵੀ ਦਖਲ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਮਾਡਲ HTML ਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੋ। ਤੁਹਾਨੂੰ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ .modalਕਿਸੇ ਹੋਰ ਸਥਿਰ ਤੱਤ ਦੇ ਅੰਦਰ ਆਲ੍ਹਣਾ ਬਣਾਉਣ ਵੇਲੇ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਵੇਗਾ।
  • ਇੱਕ ਵਾਰ ਫਿਰ, ਦੇ ਕਾਰਨ position: fixed, ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਨਾਲ ਕੁਝ ਚੇਤਾਵਨੀਆਂ ਹਨ. ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ
  • HTML5 ਆਪਣੇ ਅਰਥ ਵਿਗਿਆਨ ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, HTML autofocusਗੁਣ ਦਾ ਬੂਟਸਟਰੈਪ ਮਾਡਲਾਂ ਵਿੱਚ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਉਸੇ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਕੁਝ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ:
$('#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="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">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">Understood</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-scrollableਤੁਸੀਂ ਇੱਕ ਸਕ੍ਰੋਲੇਬਲ ਮਾਡਲ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਵਿੱਚ ਜੋੜ ਕੇ ਮਾਡਲ ਬਾਡੀ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ .modal-dialog

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ

ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ ਲੋੜ ਅਨੁਸਾਰ ਮਾਡਲਾਂ ਦੇ ਅੰਦਰ ਰੱਖੇ ਜਾ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਮੋਡਲ ਬੰਦ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਅੰਦਰਲੇ ਕੋਈ ਵੀ ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ ਵੀ ਆਪਣੇ ਆਪ ਖਾਰਜ ਹੋ ਜਾਂਦੇ ਹਨ।

<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"ਆਪ ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ on ਨਾਲ ਆਪਣੇ ਮਾਡਲ ਡਾਇਲਾਗ ਦਾ ਵੇਰਵਾ ਦੇ ਸਕਦੇ ਹੋ ।aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube ਵੀਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਮੋਡਲਾਂ ਵਿੱਚ YouTube ਵਿਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਲਈ ਵਾਧੂ JavaScript ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਨਾ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪਲੇਬੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬੰਦ ਕਰਨ ਲਈ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਇਹ ਮਦਦਗਾਰ ਸਟੈਕ ਓਵਰਫਲੋ ਪੋਸਟ ਦੇਖੋ

ਵਿਕਲਪਿਕ ਆਕਾਰ

ਮਾਡਲਾਂ ਦੇ ਤਿੰਨ ਵਿਕਲਪਿਕ ਆਕਾਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ .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" role="document">
    <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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ਵਰਤੋਂ

ਮਾਡਲ ਪਲੱਗਇਨ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ, ਮੰਗ 'ਤੇ ਤੁਹਾਡੀ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਇਹ ਡਿਫੌਲਟ ਸਕ੍ਰੋਲਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ .modal-openਲਈ ਵੀ ਜੋੜਦਾ ਹੈ ਅਤੇ ਮਾਡਲ ਤੋਂ ਬਾਹਰ ਕਲਿੱਕ ਕਰਨ ਵੇਲੇ ਦਿਖਾਏ ਗਏ ਮਾਡਲਾਂ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਇੱਕ ਕਲਿੱਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇੱਕ ਬਣਾਉਂਦਾ ਹੈ।<body>.modal-backdrop

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਸਰਗਰਮ ਕਰੋ। data-toggle="modal"ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ, ਇੱਕ ਦੇ ਨਾਲ data-target="#foo"ਜਾਂ href="#foo"ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਖਾਸ ਮਾਡਲ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript ਰਾਹੀਂ

myModalJavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
ਪਿਛੋਕੜ ਬੂਲੀਅਨ ਜਾਂ ਸਤਰ'static' ਸੱਚ ਹੈ ਇੱਕ ਮਾਡਲ-ਬੈਕਡ੍ਰੌਪ ਤੱਤ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ, staticਇੱਕ ਬੈਕਡ੍ਰੌਪ ਲਈ ਨਿਸ਼ਚਿਤ ਕਰੋ ਜੋ ਕਿ ਕਲਿੱਕ ਕਰਨ ਜਾਂ ਏਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਕੀਬੋਰਡ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ
ਫੋਕਸ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ 'ਤੇ ਫੋਕਸ ਕਰਦਾ ਹੈ।
ਦਿਖਾਓ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ ਦਿਖਾਉਂਦਾ ਹੈ।

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ

.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 ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hidePrevented.bs.modal ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ, ਇਸਦਾ ਬੈਕਡ੍ਰੌਪ ਹੁੰਦਾ ਹੈ staticਅਤੇ ਮਾਡਲ ਦੇ ਬਾਹਰ ਇੱਕ ਕਲਿਕ ਜਾਂ ਇੱਕ ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ।
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})