modals.mdx 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. ---
  2. title: Modals
  3. description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
  4. ---
  5. ## Table of contents
  6. ## Default markup
  7. ```html example code centered height="30rem"
  8. <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  9. Launch demo modal
  10. </button>
  11. <div class="modal" id="exampleModal" tabindex="-1">
  12. <div class="modal-dialog" role="document">
  13. <div class="modal-content">
  14. <div class="modal-header">
  15. <h5 class="modal-title">Modal title</h5>
  16. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  17. </div>
  18. <div class="modal-body">
  19. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
  20. </div>
  21. <div class="modal-footer">
  22. <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
  23. <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. ```
  29. ## Prompt and alert
  30. ```html example code centered height="30rem"
  31. <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  32. Launch alert modal
  33. </button>
  34. <div class="modal" id="exampleModal" tabindex="-1">
  35. <div class="modal-dialog modal-sm" role="document">
  36. <div class="modal-content">
  37. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  38. <div class="modal-status bg-danger"></div>
  39. <div class="modal-body text-center py-4">
  40. <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  41. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  42. <path d="M12 9v2m0 4v.01" />
  43. <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
  44. </svg>
  45. <h3>Are you sure?</h3>
  46. <div class="text-muted">Do you really want to remove 84 files? What you've done cannot be undone.</div>
  47. </div>
  48. <div class="modal-footer">
  49. <div class="w-100">
  50. <div class="row">
  51. <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
  52. Cancel
  53. </a></div>
  54. <div class="col"><a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
  55. Delete 84 items
  56. </a></div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. ```
  64. ```html example code centered height="30rem"
  65. <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  66. Launch demo modal
  67. </button>
  68. <div class="modal" id="exampleModal" tabindex="-1">
  69. <div class="modal-dialog modal-sm" role="document">
  70. <div class="modal-content">
  71. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  72. <div class="modal-status bg-success"></div>
  73. <div class="modal-body text-center py-4">
  74. <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  75. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  76. <circle cx="12" cy="12" r="9" />
  77. <path d="M9 12l2 2l4 -4" />
  78. </svg>
  79. <h3>Payment succedeed</h3>
  80. <div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
  81. </div>
  82. <div class="modal-footer">
  83. <div class="w-100">
  84. <div class="row">
  85. <div class="col">
  86. <a href="#" class="btn w-100" data-bs-dismiss="modal">
  87. Go to dashboard
  88. </a>
  89. </div>
  90. <div class="col">
  91. <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">
  92. View invoice
  93. </a>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. ```
  102. ## Modal with form
  103. ```html example code centered height="30rem"
  104. <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  105. Launch modal with form
  106. </button>
  107. <div class="modal" id="exampleModal" tabindex="-1">
  108. <div class="modal-dialog modal-lg" role="document">
  109. <div class="modal-content">
  110. <div class="modal-header">
  111. <h5 class="modal-title">New report</h5>
  112. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  113. </div>
  114. <div class="modal-body">
  115. <div class="mb-3">
  116. <label class="form-label">Name</label>
  117. <input type="text" class="form-control" name="example-text-input" placeholder="Your report name" />
  118. </div>
  119. <label class="form-label">Report type</label>
  120. <div class="form-selectgroup-boxes row mb-3">
  121. <div class="col-md-6">
  122. <label class="form-selectgroup-item">
  123. <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked />
  124. <span class="form-selectgroup-label d-flex align-items-center p-3">
  125. <span class="me-3">
  126. <span class="form-selectgroup-check"></span>
  127. </span>
  128. <span class="form-selectgroup-label-content">
  129. <span class="form-selectgroup-title strong mb-1">Simple</span>
  130. <span class="d-block text-muted">Provide only basic data needed for the report</span>
  131. </span>
  132. </span>
  133. </label>
  134. </div>
  135. <div class="col-md-6">
  136. <label class="form-selectgroup-item">
  137. <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
  138. <span class="form-selectgroup-label d-flex align-items-center p-3">
  139. <span class="me-3">
  140. <span class="form-selectgroup-check"></span>
  141. </span>
  142. <span class="form-selectgroup-label-content">
  143. <span class="form-selectgroup-title strong mb-1">Advanced</span>
  144. <span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
  145. </span>
  146. </span>
  147. </label>
  148. </div>
  149. </div>
  150. <div class="row">
  151. <div class="col-lg-8">
  152. <div class="mb-3">
  153. <label class="form-label">Report url</label>
  154. <div class="input-group input-group-flat">
  155. <span class="input-group-text">
  156. https://tabler.io/reports/
  157. </span>
  158. <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
  159. </div>
  160. </div>
  161. </div>
  162. <div class="col-lg-4">
  163. <div class="mb-3">
  164. <label class="form-label">Visibility</label>
  165. <select class="form-select">
  166. <option value="1" selected>Private</option>
  167. <option value="2">Public</option>
  168. <option value="3">Hidden</option>
  169. </select>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="modal-body">
  175. <div class="row">
  176. <div class="col-lg-6">
  177. <div class="mb-3">
  178. <label class="form-label">Client name</label>
  179. <input type="text" class="form-control" />
  180. </div>
  181. </div>
  182. <div class="col-lg-6">
  183. <div class="mb-3">
  184. <label class="form-label">Reporting period</label>
  185. <input type="date" class="form-control" />
  186. </div>
  187. </div>
  188. <div class="col-lg-12">
  189. <div>
  190. <label class="form-label">Additional information</label>
  191. <textarea class="form-control" rows="3"></textarea>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="modal-footer">
  197. <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
  198. Cancel
  199. </a>
  200. <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
  201. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  202. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  203. <path d="M12 5l0 14"></path>
  204. <path d="M5 12l14 0"></path>
  205. </svg>
  206. Create new report
  207. </a>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. ```