Source

موڈل

لائٹ باکسز، صارف کی اطلاعات، یا مکمل طور پر حسب ضرورت مواد کے لیے اپنی سائٹ پر ڈائیلاگ شامل کرنے کے لیے بوٹسٹریپ کا JavaScript موڈل پلگ ان استعمال کریں۔

یہ کیسے کام کرتا ہے

بوٹسٹریپ کے موڈل جزو کے ساتھ شروع کرنے سے پہلے، درج ذیل کو ضرور پڑھیں کیونکہ ہمارے مینو کے اختیارات حال ہی میں تبدیل ہوئے ہیں۔

  • ماڈلز HTML، CSS، اور JavaScript کے ساتھ بنائے گئے ہیں۔ وہ دستاویز میں موجود ہر چیز پر پوزیشن میں ہیں اور <body>اس کے بجائے اسکرول کو ہٹا دیں تاکہ موڈل مواد اسکرول کر سکے۔
  • موڈل "بیک ڈراپ" پر کلک کرنے سے موڈل خود بخود بند ہو جائے گا۔
  • بوٹسٹریپ ایک وقت میں صرف ایک موڈل ونڈو کو سپورٹ کرتا ہے۔ نیسٹڈ ماڈلز تعاون یافتہ نہیں ہیں کیونکہ ہمارا خیال ہے کہ وہ صارف کے ناقص تجربات ہیں۔
  • موڈلز استعمال کرتے ہیں position: fixed، جو کبھی کبھی اس کی رینڈرنگ کے بارے میں تھوڑا خاص ہو سکتا ہے۔ جب بھی ممکن ہو، دوسرے عناصر کی ممکنہ مداخلت سے بچنے کے لیے اپنے موڈل ایچ ٹی ایم ایل کو اعلیٰ سطح کی پوزیشن میں رکھیں۔ .modalکسی دوسرے مقررہ عنصر کے اندر گھونسلہ بناتے وقت آپ کو ممکنہ طور پر مسائل کا سامنا کرنا پڑے گا ۔
  • ایک بار پھر، کی وجہ سے position: fixed، موبائل آلات پر موڈل استعمال کرنے کے حوالے سے کچھ انتباہات ہیں۔ تفصیلات کے لیے ہمارے براؤزر سپورٹ دستاویزات دیکھیں۔
  • HTML5 اپنے سیمنٹکس کی وضاحت کیسے کرتا ہے اس کی وجہ سے، HTML autofocusوصف کا بوٹسٹریپ موڈلز میں کوئی اثر نہیں ہوتا ہے۔ اسی اثر کو حاصل کرنے کے لیے، کچھ حسب ضرورت جاوا اسکرپٹ استعمال کریں:
$('#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-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>

ٹول ٹپس اور پاپ اوور

ٹول ٹپس اور پاپ اوور کو ضرورت کے مطابق ماڈلز میں رکھا جا سکتا ہے۔ جب موڈلز بند ہو جاتے ہیں، تو اندر موجود کوئی بھی ٹول ٹپس اور پاپ اوور بھی خود بخود برخاست ہو جاتے ہیں۔

<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"خود کو شامل کرنا یقینی بنائیں ۔ مزید برآں، آپ on کے ساتھ اپنے موڈل ڈائیلاگ کی تفصیل دے سکتے ہیں ۔aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

یوٹیوب ویڈیوز کو سرایت کرنا

موڈلز میں YouTube ویڈیوز کو ایمبیڈ کرنے کے لیے اضافی JavaScript کی ضرورت ہوتی ہے جو Bootstrap میں نہیں ہے تاکہ پلے بیک وغیرہ کو خود بخود روکا جا سکے۔ مزید معلومات کے لیے یہ مددگار اسٹیک اوور فلو پوسٹ دیکھیں ۔

اختیاری سائز

موڈلز کے دو اختیاری سائز ہوتے ہیں، جو ترمیم کرنے والے کلاسز کے ذریعے دستیاب ہوتے ہیں جو ایک پر رکھے جاتے ہیں .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>

جاوا اسکرپٹ کے ذریعے

myModalJavaScript کی ایک لائن کے ساتھ id کے ساتھ ایک موڈل کو کال کریں :

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

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-backdrop=""۔

نام قسم طے شدہ تفصیل
پس منظر بولین یا تار'static' سچ ہے ایک موڈل بیک ڈراپ عنصر پر مشتمل ہے۔ متبادل طور پر، staticایک ایسے پس منظر کی وضاحت کریں جو کلک کرنے پر موڈل کو بند نہ کرے۔
کی بورڈ بولین سچ ہے Escape کلید کو دبانے پر موڈل بند ہو جاتا ہے۔
توجہ مرکوز بولین سچ ہے ابتدائی ہونے پر موڈل پر توجہ مرکوز کرتا ہے۔
دکھائیں بولین سچ ہے شروع ہونے پر موڈل دکھاتا ہے۔

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام 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ایونٹ کی پراپرٹی کے طور پر دستیاب ہوتا ہے۔
دکھایا گیا بی ایس موڈل یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب موڈل صارف کے لیے مرئی ہو جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔ اگر کلک کی وجہ سے ہو تو، کلک کردہ عنصر relatedTargetایونٹ کی پراپرٹی کے طور پر دستیاب ہوتا ہے۔
hide.bs.modal اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hideمثال کے طریقے کو بلایا جاتا ہے۔
hidden.bs.modal یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب موڈل صارف سے چھپ جانا ختم کر دیتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})