JS modal oyna
JS Modal (modal.js)
Modal plagini — joriy sahifa ustida ko‘rsatiladigan dialog oynasi/qalqib chiquvchi oyna.
Modal oynalar bo‘yicha darslik uchun Bootstrap modal oyna darsligimizni o‘qing.
Modal plagini klasslari
| Klass | Tavsif |
|---|---|
| .modal | Modal oyna yaratadi |
| .modal-content | Modal oynani chegara, fon rangi va h.k. bilan to‘g‘ri bezaydi. Modal oynaning sarlavha qismi (header), tanasi (body) va pastki qismini (footer) qo‘shish uchun ushbu klassdan foydalaning. |
| .modal-header | Modal oynaning sarlavha qismi (header) uchun stilni belgilaydi |
| .modal-body | Modal oyna tanasi (body) uchun stilni belgilaydi |
| .modal-footer | Modal oynadagi pastki qism (footer) uchun stilni belgilaydi. Eslatma: Bu qism standart bo‘yicha o‘ngga tekislangan. Buni o‘zgartirish uchun CSS’ni text-align:left|center bilan qayta yozing |
| .modal-sm | Kichik modal oynani belgilaydi |
| .modal-lg | Katta modal oynani belgilaydi |
| .fade | Modal oynani asta-sekin paydo qiladigan va yo‘qotadigan (fade) animatsiya/o‘tish effektini qo‘shadi |
Modal oynani data-* atributlari orqali ishga tushirish
Istalgan elementga data-toggle="modal" va data-target="#modalID" ni qo‘shing.
Eslatma: <a> elementlari uchun data-target ni tushirib qoldiring va uning o‘rniga href="#modalID" dan foydalaning:
Misol
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
O‘zingiz sinab ko‘ring »
JavaScript orqali ishga tushirish
Qo‘lda quyidagicha yoqing:
Modal parametrlari
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-backdrop="".
| Nomi | Tipi | Default | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| backdrop | boolean yoki "static" stringi | true | Modal oynaning to‘q rangli qoplamasi (overlay) bo‘lishi kerakligini belgilaydi:
Agar "static" qiymatini belgilasangiz, modal oynani uning tashqarisiga bosish orqali yopib bo‘lmaydi |
JS orqali data orqali |
| keyboard | boolean | true | Modal oynani escape tugmasi (Esc) bilan yopish mumkinligini belgilaydi:
|
JS orqali data orqali |
| show | boolean | true | Ishga tushirilganda (initsializatsiya) modal oynani ko‘rsatish kerakligini belgilaydi | JS orqali data orqali |
Modal metodlari
Quyidagi jadvalda barcha mavjud modal metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .modal(options) | Kontentni modal oyna sifatida faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang | Sinab ko‘ring |
| .modal("toggle") | Modal oynani ochadi yoki yopadi (toggle) | Sinab ko‘ring |
| .modal("show") | Modal oynani ochadi | Sinab ko‘ring |
| .modal("hide") | Modal oynani yashiradi | Sinab ko‘ring |
Modal hodisalari
Quyidagi jadvalda barcha mavjud modal hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.modal | Modal oyna ko‘rsatilish arafasida bo‘lganda sodir bo‘ladi | Sinab ko‘ring |
| shown.bs.modal | Modal oyna to‘liq ko‘rsatilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
| hide.bs.modal | Modal oyna yashirilish arafasida bo‘lganda sodir bo‘ladi | Sinab ko‘ring |
| hidden.bs.modal | Modal oyna to‘liq yashirilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
Ko‘proq misollar
Kirish uchun modal oyna
Quyidagi misolda tizimga kirish uchun modal oyna yaratiladi:
Misol
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!