30+ Bootstrap Modal Animation Effects

30+ Bootstrap Modal Animation Effects
Code Snippet:30+ Bootstrap Modal Animation Effects
Author: antoncabon
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 2,542
License: MIT
Edit Code online: View on CodePen
Read More

This code showcases a collection of 30+ Bootstrap modal animation effects. Each effect is triggered by clicking on a button, presenting a visually appealing modal with smooth animations. These animations include bounce, fade, slide, and more.

It utilizes jQuery and Velocity.js to add dynamic animations to the modals. When a modal is triggered to show, the script detects the specified animation effect (such as shake, pulse, tada, flash, bounce, or swing) from the data attribute of the modal. The corresponding animation is then applied to the modal.

You can easily implement these animated modal effects into your web projects with this simple and efficient code.

How to Create Bootstrap Modal with Animation Effects

1. First of all, load the Normalize and Bootstrap CSS by adding the following CDN links into the head tag of your web project.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  2. <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

2. Now, copy/paste the HTML code of the desired modal that you want to integrate into your project.

  1. <!--****************-->
  2. <!-- C O P Y -->
  3. <!--****************-->
  4. <a href="#costumModal30" role="button" class="btn btn-default" data-toggle="modal">
  5. bounce
  6. </a>
  7. <div id="costumModal30" class="modal" data-easein="bounce" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  8. <div class="modal-dialog">
  9. <div class="modal-content">
  10. <div class="modal-header">
  11. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  12. ×
  13. </button>
  14. <h4 class="modal-title">
  15. War is an ugly thing
  16. </h4>
  17. </div>
  18. <div class="modal-body">
  19. <p>
  20. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  21. </p>
  22. </div>
  23. <div class="modal-footer">
  24. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  25. Close
  26. </button>
  27. <button class="btn btn-primary">
  28. Save changes
  29. </button>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <!--****************-->
  35. <!-- C O P Y -->
  36. <!--****************-->
  37. <a href="#costumModal10" role="button" class="btn btn-default" data-toggle="modal">
  38. bounceIn
  39. </a>
  40. <div id="costumModal10" class="modal" data-easein="bounceIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  41. <div class="modal-dialog">
  42. <div class="modal-content">
  43. <div class="modal-header">
  44. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  45. ×
  46. </button>
  47. <h4 class="modal-title">
  48. War is an ugly thing
  49. </h4>
  50. </div>
  51. <div class="modal-body">
  52. <p>
  53. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  54. </p>
  55. </div>
  56. <div class="modal-footer">
  57. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  58. Close
  59. </button>
  60. <button class="btn btn-primary">
  61. Save World
  62. </button>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <!--****************-->
  68. <!-- C O P Y -->
  69. <!--****************-->
  70. <a href="#costumModal11" role="button" class="btn btn-default" data-toggle="modal">
  71. bounceUpIn
  72. </a>
  73. <div id="costumModal11" class="modal" data-easein="bounceUpIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  74. <div class="modal-dialog">
  75. <div class="modal-content">
  76. <div class="modal-header">
  77. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  78. ×
  79. </button>
  80. <h4 class="modal-title">
  81. Modal Header
  82. </h4>
  83. </div>
  84. <div class="modal-body">
  85. <p>
  86. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill.
  87. </p>
  88. </div>
  89. <div class="modal-footer">
  90. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  91. Close
  92. </button>
  93. <button class="btn btn-primary">
  94. Save our Soul
  95. </button>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <!--****************-->
  101. <!-- C O P Y -->
  102. <!--****************-->
  103. <a href="#costumModal12" role="button" class="btn btn-default" data-toggle="modal">
  104. bounceDownIn
  105. </a>
  106. <div id="costumModal12" class="modal" data-easein="bounceDownIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  107. <div class="modal-dialog">
  108. <div class="modal-content">
  109. <div class="modal-header">
  110. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  111. ×
  112. </button>
  113. <h4 class="modal-title">
  114. War is an ugly thing
  115. </h4>
  116. </div>
  117. <div class="modal-body">
  118. <p>
  119. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  120. </p>
  121. </div>
  122. <div class="modal-footer">
  123. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  124. Close
  125. </button>
  126. <button class="btn btn-primary">
  127. Save changes
  128. </button>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <!--****************-->
  134. <!-- C O P Y -->
  135. <!--****************-->
  136. <a href="#costumModal13" role="button" class="btn btn-default" data-toggle="modal">
  137. bounceLeftIn
  138. </a>
  139. <div id="costumModal13" class="modal" data-easein="bounceLeftIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  140. <div class="modal-dialog">
  141. <div class="modal-content">
  142. <div class="modal-header">
  143. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  144. ×
  145. </button>
  146. <h4 class="modal-title">
  147. Modal Header
  148. </h4>
  149. </div>
  150. <div class="modal-body">
  151. <p>
  152. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  153. </p>
  154. </div>
  155. <div class="modal-footer">
  156. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  157. Close
  158. </button>
  159. <button class="btn btn-primary">
  160. Save changes
  161. </button>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <!--****************-->
  167. <!-- C O P Y -->
  168. <!--****************-->
  169. <a href="#costumModal15" role="button" class="btn btn-default" data-toggle="modal">
  170. bounceRightIn
  171. </a>
  172. <div id="costumModal15" class="modal" data-easein="bounceRightIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  173. <div class="modal-dialog">
  174. <div class="modal-content">
  175. <div class="modal-header">
  176. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  177. ×
  178. </button>
  179. <h4 class="modal-title">
  180. Modal Header
  181. </h4>
  182. </div>
  183. <div class="modal-body">
  184. <p>
  185. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  186. </p>
  187. </div>
  188. <div class="modal-footer">
  189. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  190. Close
  191. </button>
  192. <button class="btn btn-primary">
  193. Save changes
  194. </button>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. <!--****************-->
  200. <!-- C O P Y -->
  201. <!--****************-->
  202. <a href="#costumModal31" role="button" class="btn btn-default" data-toggle="modal">
  203. flash
  204. </a>
  205. <div id="costumModal31" class="modal" data-easein="flash" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  206. <div class="modal-dialog">
  207. <div class="modal-content">
  208. <div class="modal-header">
  209. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  210. ×
  211. </button>
  212. <h4 class="modal-title">
  213. Modal Header
  214. </h4>
  215. </div>
  216. <div class="modal-body">
  217. <p>
  218. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  219. </p>
  220. </div>
  221. <div class="modal-footer">
  222. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  223. Close
  224. </button>
  225. <button class="btn btn-primary">
  226. Save changes
  227. </button>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. <!--****************-->
  233. <!-- C O P Y -->
  234. <!--****************-->
  235. <a href="#costumModal1" role="button" data-target="#costumModal1" class="btn btn-default" data-toggle="modal">
  236. fadeIn
  237. </a>
  238. <div id="costumModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="false">
  239. <div class="modal-dialog">
  240. <div class="modal-content">
  241. <div class="modal-header">
  242. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  243. ×
  244. </button>
  245. <h4 class="modal-title" id="costumModalLabel">
  246. Modal Header
  247. </h4>
  248. </div>
  249. <div class="modal-body">
  250. <p>
  251. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  252. </p>
  253. </div>
  254. <div class="modal-footer">
  255. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  256. Close
  257. </button>
  258. <button class="btn btn-primary">
  259. Save changes
  260. </button>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. <!--****************-->
  266. <!-- C O P Y -->
  267. <!--****************-->
  268. <a href="#costumModal2" role="button" class="btn btn-default" data-toggle="modal">
  269. flipXIn
  270. </a>
  271. <div id="costumModal2" class="modal" data-easein="flipXIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  272. <div class="modal-dialog">
  273. <div class="modal-content">
  274. <div class="modal-header">
  275. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  276. ×
  277. </button>
  278. <h4 class="modal-title">
  279. Modal Header
  280. </h4>
  281. </div>
  282. <div class="modal-body">
  283. <p>
  284. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  285. </p>
  286. </div>
  287. <div class="modal-footer">
  288. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  289. Close
  290. </button>
  291. <button class="btn btn-primary">
  292. Save changes
  293. </button>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <!--****************-->
  299. <!-- C O P Y -->
  300. <!--****************-->
  301. <a href="#costumModal3" role="button" class="btn btn-default" data-toggle="modal">
  302. flipYIn
  303. </a>
  304. <div id="costumModal3" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  305. <div class="modal-dialog">
  306. <div class="modal-content">
  307. <div class="modal-header">
  308. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  309. ×
  310. </button>
  311. <h4 class="modal-title">
  312. Modal Header
  313. </h4>
  314. </div>
  315. <div class="modal-body">
  316. <p>
  317. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  318. </p>
  319. </div>
  320. <div class="modal-footer">
  321. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  322. Close
  323. </button>
  324. <button class="btn btn-primary">
  325. Save changes
  326. </button>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. <!--****************-->
  332. <!-- C O P Y -->
  333. <!--****************-->
  334. <a href="#costumModal4" role="button" class="btn btn-default" data-toggle="modal">
  335. flipBounceXIn
  336. </a>
  337. <div id="costumModal4" class="modal" data-easein="flipBounceXIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  338. <div class="modal-dialog">
  339. <div class="modal-content">
  340. <div class="modal-header">
  341. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  342. ×
  343. </button>
  344. <h4 class="modal-title">
  345. Modal Header
  346. </h4>
  347. </div>
  348. <div class="modal-body">
  349. <p>
  350. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  351. </p>
  352. </div>
  353. <div class="modal-footer">
  354. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  355. Close
  356. </button>
  357. <button class="btn btn-primary">
  358. Save changes
  359. </button>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. <!--****************-->
  365. <!-- C O P Y -->
  366. <!--****************-->
  367. <a href="#costumModal5" role="button" class="btn btn-default" data-toggle="modal">
  368. flipBounceYIn
  369. </a>
  370. <div id="costumModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  371. <div class="modal-dialog">
  372. <div class="modal-content">
  373. <div class="modal-header">
  374. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  375. ×
  376. </button>
  377. <h4 class="modal-title">
  378. Modal Header
  379. </h4>
  380. </div>
  381. <div class="modal-body">
  382. <p>
  383. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  384. </p>
  385. </div>
  386. <div class="modal-footer">
  387. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  388. Close
  389. </button>
  390. <button class="btn btn-primary">
  391. Save changes
  392. </button>
  393. </div>
  394. </div>
  395. </div>
  396. </div>
  397. <!--****************-->
  398. <!-- C O P Y -->
  399. <!--****************-->
  400. <a href="#costumModal6" role="button" class="btn btn-default" data-toggle="modal">
  401. swoopIn
  402. </a>
  403. <div id="costumModal6" class="modal" data-easein="swoopIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  404. <div class="modal-dialog">
  405. <div class="modal-content">
  406. <div class="modal-header">
  407. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  408. ×
  409. </button>
  410. <h4 class="modal-title">
  411. Modal Header
  412. </h4>
  413. </div>
  414. <div class="modal-body">
  415. <p>
  416. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  417. </p>
  418. </div>
  419. <div class="modal-footer">
  420. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  421. Close
  422. </button>
  423. <button class="btn btn-primary">
  424. Save changes
  425. </button>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. <!--****************-->
  431. <!-- C O P Y -->
  432. <!--****************-->
  433. <a href="#costumModal7" role="button" class="btn btn-default" data-toggle="modal">
  434. whirlIn
  435. </a>
  436. <div id="costumModal7" class="modal" data-easein="whirlIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  437. <div class="modal-dialog">
  438. <div class="modal-content">
  439. <div class="modal-header">
  440. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  441. ×
  442. </button>
  443. <h4 class="modal-title">
  444. Modal Header
  445. </h4>
  446. </div>
  447. <div class="modal-body">
  448. <p>
  449. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  450. </p>
  451. </div>
  452. <div class="modal-footer">
  453. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  454. Close
  455. </button>
  456. <button class="btn btn-primary">
  457. Save changes
  458. </button>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. <!--****************-->
  464. <!-- C O P Y -->
  465. <!--****************-->
  466. <a href="#costumModal8" role="button" class="btn btn-default" data-toggle="modal">
  467. shrinkIn
  468. </a>
  469. <div id="costumModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  470. <div class="modal-dialog">
  471. <div class="modal-content">
  472. <div class="modal-header">
  473. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  474. ×
  475. </button>
  476. <h4 class="modal-title">
  477. Modal Header
  478. </h4>
  479. </div>
  480. <div class="modal-body">
  481. <p>
  482. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  483. </p>
  484. </div>
  485. <div class="modal-footer">
  486. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  487. Close
  488. </button>
  489. <button class="btn btn-primary">
  490. Save changes
  491. </button>
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. <!--****************-->
  497. <!-- C O P Y -->
  498. <!--****************-->
  499. <a href="#costumModal9" role="button" class="btn btn-default" data-toggle="modal">
  500. expandIn
  501. </a>
  502. <div id="costumModal9" class="modal" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  503. <div class="modal-dialog">
  504. <div class="modal-content">
  505. <div class="modal-header">
  506. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  507. ×
  508. </button>
  509. <h4 class="modal-title">
  510. Modal Header
  511. </h4>
  512. </div>
  513. <div class="modal-body">
  514. <p>
  515. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  516. </p>
  517. </div>
  518. <div class="modal-footer">
  519. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  520. Close
  521. </button>
  522. <button class="btn btn-primary">
  523. Save changes
  524. </button>
  525. </div>
  526. </div>
  527. </div>
  528. </div>
  529. <!--****************-->
  530. <!-- C O P Y -->
  531. <!--****************-->
  532. <a href="#costumModal16" role="button" class="btn btn-default" data-toggle="modal">
  533. slideUpIn
  534. </a>
  535. <div id="costumModal16" class="modal" data-easein="slideUpIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  536. <div class="modal-dialog">
  537. <div class="modal-content">
  538. <div class="modal-header">
  539. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  540. ×
  541. </button>
  542. <h4 class="modal-title">
  543. Modal Header
  544. </h4>
  545. </div>
  546. <div class="modal-body">
  547. <p>
  548. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  549. </p>
  550. </div>
  551. <div class="modal-footer">
  552. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  553. Close
  554. </button>
  555. <button class="btn btn-primary">
  556. Save changes
  557. </button>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. <!--****************-->
  563. <!-- C O P Y -->
  564. <!--****************-->
  565. <a href="#costumModal17" role="button" class="btn btn-default" data-toggle="modal">
  566. slideDownIn
  567. </a>
  568. <div id="costumModal17" class="modal" data-easein="slideDownIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  569. <div class="modal-dialog">
  570. <div class="modal-content">
  571. <div class="modal-header">
  572. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  573. ×
  574. </button>
  575. <h4 class="modal-title">
  576. Modal Header
  577. </h4>
  578. </div>
  579. <div class="modal-body">
  580. <p>
  581. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  582. </p>
  583. </div>
  584. <div class="modal-footer">
  585. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  586. Close
  587. </button>
  588. <button class="btn btn-primary">
  589. Save changes
  590. </button>
  591. </div>
  592. </div>
  593. </div>
  594. </div>
  595. <!--****************-->
  596. <!-- C O P Y -->
  597. <!--****************-->
  598. <a href="#costumModal18" role="button" class="btn btn-default" data-toggle="modal">
  599. slideLeftIn
  600. </a>
  601. <div id="costumModal18" class="modal" data-easein="slideLeftIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  602. <div class="modal-dialog">
  603. <div class="modal-content">
  604. <div class="modal-header">
  605. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  606. ×
  607. </button>
  608. <h4 class="modal-title">
  609. Modal Header
  610. </h4>
  611. </div>
  612. <div class="modal-body">
  613. <p>
  614. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  615. </p>
  616. </div>
  617. <div class="modal-footer">
  618. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  619. Close
  620. </button>
  621. <button class="btn btn-primary">
  622. Save changes
  623. </button>
  624. </div>
  625. </div>
  626. </div>
  627. </div>
  628. <!--****************-->
  629. <!-- C O P Y -->
  630. <!--****************-->
  631. <a href="#costumModal14" role="button" class="btn btn-default" data-toggle="modal">
  632. slideRightIn
  633. </a>
  634. <div id="costumModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  635. <div class="modal-dialog">
  636. <div class="modal-content">
  637. <div class="modal-header">
  638. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  639. ×
  640. </button>
  641. <h4 class="modal-title">
  642. Modal Header
  643. </h4>
  644. </div>
  645. <div class="modal-body">
  646. <p>
  647. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  648. </p>
  649. </div>
  650. <div class="modal-footer">
  651. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  652. Close
  653. </button>
  654. <button class="btn btn-primary">
  655. Save changes
  656. </button>
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. <!--****************-->
  662. <!-- C O P Y -->
  663. <!--****************-->
  664. <a href="#costumModal19" role="button" class="btn btn-default" data-toggle="modal">
  665. slideUpBigIn
  666. </a>
  667. <div id="costumModal19" class="modal" data-easein="slideUpBigIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  668. <div class="modal-dialog">
  669. <div class="modal-content">
  670. <div class="modal-header">
  671. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  672. ×
  673. </button>
  674. <h4 class="modal-title">
  675. Modal Header
  676. </h4>
  677. </div>
  678. <div class="modal-body">
  679. <p>
  680. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  681. </p>
  682. </div>
  683. <div class="modal-footer">
  684. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  685. Close
  686. </button>
  687. <button class="btn btn-primary">
  688. Save changes
  689. </button>
  690. </div>
  691. </div>
  692. </div>
  693. </div>
  694. <!--****************-->
  695. <!-- C O P Y -->
  696. <!--****************-->
  697. <a href="#costumModal20" role="button" class="btn btn-default" data-toggle="modal">
  698. slideDownBigIn
  699. </a>
  700. <div id="costumModal20" class="modal" data-easein="slideDownBigIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  701. <div class="modal-dialog">
  702. <div class="modal-content">
  703. <div class="modal-header">
  704. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  705. ×
  706. </button>
  707. <h4 class="modal-title">
  708. Modal Header
  709. </h4>
  710. </div>
  711. <div class="modal-body">
  712. <p>
  713. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  714. </p>
  715. </div>
  716. <div class="modal-footer">
  717. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  718. Close
  719. </button>
  720. <button class="btn btn-primary">
  721. Save changes
  722. </button>
  723. </div>
  724. </div>
  725. </div>
  726. </div>
  727. <!--****************-->
  728. <!-- C O P Y -->
  729. <!--****************-->
  730. <a href="#costumModal21" role="button" class="btn btn-default" data-toggle="modal">
  731. slideLeftBigIn
  732. </a>
  733. <div id="costumModal21" class="modal" data-easein="slideLeftBigIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  734. <div class="modal-dialog">
  735. <div class="modal-content">
  736. <div class="modal-header">
  737. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  738. ×
  739. </button>
  740. <h4 class="modal-title">
  741. Modal Header
  742. </h4>
  743. </div>
  744. <div class="modal-body">
  745. <p>
  746. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  747. </p>
  748. </div>
  749. <div class="modal-footer">
  750. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  751. Close
  752. </button>
  753. <button class="btn btn-primary">
  754. Save changes
  755. </button>
  756. </div>
  757. </div>
  758. </div>
  759. </div>
  760. <!--****************-->
  761. <!-- C O P Y -->
  762. <!--****************-->
  763. <a href="#costumModal22" role="button" class="btn btn-default" data-toggle="modal">
  764. slideRightBigIn
  765. </a>
  766. <div id="costumModal22" class="modal" data-easein="slideRightBigIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  767. <div class="modal-dialog">
  768. <div class="modal-content">
  769. <div class="modal-header">
  770. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  771. ×
  772. </button>
  773. <h4 class="modal-title">
  774. Modal Header
  775. </h4>
  776. </div>
  777. <div class="modal-body">
  778. <p>
  779. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  780. </p>
  781. </div>
  782. <div class="modal-footer">
  783. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  784. Close
  785. </button>
  786. <button class="btn btn-primary">
  787. Save changes
  788. </button>
  789. </div>
  790. </div>
  791. </div>
  792. </div>
  793. <!--****************-->
  794. <!-- C O P Y -->
  795. <!--****************-->
  796. <a href="#costumModal23" role="button" class="btn btn-default" data-toggle="modal">
  797. perspectiveUpIn
  798. </a>
  799. <div id="costumModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  800. <div class="modal-dialog">
  801. <div class="modal-content">
  802. <div class="modal-header">
  803. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  804. ×
  805. </button>
  806. <h4 class="modal-title">
  807. Modal Header
  808. </h4>
  809. </div>
  810. <div class="modal-body">
  811. <p>
  812. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  813. </p>
  814. </div>
  815. <div class="modal-footer">
  816. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  817. Close
  818. </button>
  819. <button class="btn btn-primary">
  820. Save changes
  821. </button>
  822. </div>
  823. </div>
  824. </div>
  825. </div>
  826. <!--****************-->
  827. <!-- C O P Y -->
  828. <!--****************-->
  829. <a href="#costumModal24" role="button" class="btn btn-default" data-toggle="modal">
  830. perspectiveDownIn
  831. </a>
  832. <div id="costumModal24" class="modal" data-easein="perspectiveDownIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  833. <div class="modal-dialog">
  834. <div class="modal-content">
  835. <div class="modal-header">
  836. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  837. ×
  838. </button>
  839. <h4 class="modal-title">
  840. Modal Header
  841. </h4>
  842. </div>
  843. <div class="modal-body">
  844. <p>
  845. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  846. </p>
  847. </div>
  848. <div class="modal-footer">
  849. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  850. Close
  851. </button>
  852. <button class="btn btn-primary">
  853. Save changes
  854. </button>
  855. </div>
  856. </div>
  857. </div>
  858. </div>
  859. <!--****************-->
  860. <!-- C O P Y -->
  861. <!--****************-->
  862. <a href="#costumModal25" role="button" class="btn btn-default" data-toggle="modal">
  863. perspectiveLeftIn
  864. </a>
  865. <div id="costumModal25" class="modal" data-easein="perspectiveLeftIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  866. <div class="modal-dialog">
  867. <div class="modal-content">
  868. <div class="modal-header">
  869. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  870. ×
  871. </button>
  872. <h4 class="modal-title">
  873. Modal Header
  874. </h4>
  875. </div>
  876. <div class="modal-body">
  877. <p>
  878. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  879. </p>
  880. </div>
  881. <div class="modal-footer">
  882. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  883. Close
  884. </button>
  885. <button class="btn btn-primary">
  886. Save changes
  887. </button>
  888. </div>
  889. </div>
  890. </div>
  891. </div>
  892. <!--****************-->
  893. <!-- C O P Y -->
  894. <!--****************-->
  895. <a href="#costumModal26" role="button" class="btn btn-default" data-toggle="modal">
  896. perspectiveRightIn
  897. </a>
  898. <div id="costumModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  899. <div class="modal-dialog">
  900. <div class="modal-content">
  901. <div class="modal-header">
  902. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  903. ×
  904. </button>
  905. <h4 class="modal-title">
  906. Modal Header
  907. </h4>
  908. </div>
  909. <div class="modal-body">
  910. <p>
  911. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  912. </p>
  913. </div>
  914. <div class="modal-footer">
  915. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  916. Close
  917. </button>
  918. <button class="btn btn-primary">
  919. Save changes
  920. </button>
  921. </div>
  922. </div>
  923. </div>
  924. </div>
  925. <!--****************-->
  926. <!-- C O P Y -->
  927. <!--****************-->
  928. <a href="#costumModal27" role="button" class="btn btn-default" data-toggle="modal">
  929. shake
  930. </a>
  931. <div id="costumModal27" class="modal" data-easein="shake" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  932. <div class="modal-dialog">
  933. <div class="modal-content">
  934. <div class="modal-header">
  935. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  936. ×
  937. </button>
  938. <h4 class="modal-title">
  939. Modal Header
  940. </h4>
  941. </div>
  942. <div class="modal-body">
  943. <p>
  944. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  945. </p>
  946. </div>
  947. <div class="modal-footer">
  948. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  949. Close
  950. </button>
  951. <button class="btn btn-primary">
  952. Save changes
  953. </button>
  954. </div>
  955. </div>
  956. </div>
  957. </div>
  958. <!--****************-->
  959. <!-- C O P Y -->
  960. <!--****************-->
  961. <a href="#costumModal28" role="button" class="btn btn-default" data-toggle="modal">
  962. tada
  963. </a>
  964. <div id="costumModal28" class="modal" data-easein="tada" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  965. <div class="modal-dialog">
  966. <div class="modal-content">
  967. <div class="modal-header">
  968. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  969. ×
  970. </button>
  971. <h4 class="modal-title">
  972. Modal Header
  973. </h4>
  974. </div>
  975. <div class="modal-body">
  976. <p>
  977. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  978. </p>
  979. </div>
  980. <div class="modal-footer">
  981. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  982. Close
  983. </button>
  984. <button class="btn btn-primary">
  985. Save changes
  986. </button>
  987. </div>
  988. </div>
  989. </div>
  990. </div>
  991. <!--****************-->
  992. <!-- C O P Y -->
  993. <!--****************-->
  994. <a href="#costumModal29" role="button" class="btn btn-default" data-toggle="modal">
  995. swing
  996. </a>
  997. <div id="costumModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  998. <div class="modal-dialog">
  999. <div class="modal-content">
  1000. <div class="modal-header">
  1001. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  1002. ×
  1003. </button>
  1004. <h4 class="modal-title">
  1005. Modal Header
  1006. </h4>
  1007. </div>
  1008. <div class="modal-body">
  1009. <p>
  1010. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  1011. </p>
  1012. </div>
  1013. <div class="modal-footer">
  1014. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  1015. Close
  1016. </button>
  1017. <button class="btn btn-primary">
  1018. Save changes
  1019. </button>
  1020. </div>
  1021. </div>
  1022. </div>
  1023. </div>
  1024. <!--****************-->
  1025. <!-- C O P Y -->
  1026. <!--****************-->
  1027. <a href="#costumModal32" role="button" class="btn btn-default" data-toggle="modal">
  1028. pulse
  1029. </a>
  1030. <div id="costumModal32" class="modal" data-easein="pulse" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
  1031. <div class="modal-dialog">
  1032. <div class="modal-content">
  1033. <div class="modal-header">
  1034. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  1035. ×
  1036. </button>
  1037. <h4 class="modal-title">
  1038. Modal Header
  1039. </h4>
  1040. </div>
  1041. <div class="modal-body">
  1042. <p>
  1043. “ War is an ugly thing, but not the ugliest of things. The decayed and degraded state of moral and patriotic feeling which thinks that nothing is worth war is much worse. The person who has nothing for which he is willing to fight, nothing which is more important than his own personal safety, is a miserable creature and has no chance of being free unless made and kept so by the exertions of better men than himself. ” — John Stuart Mill
  1044. </p>
  1045. </div>
  1046. <div class="modal-footer">
  1047. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
  1048. Close
  1049. </button>
  1050. <button class="btn btn-primary">
  1051. Save changes
  1052. </button>
  1053. </div>
  1054. </div>
  1055. </div>
  1056. </div>
  1057. </div>
  1058. </div>
  1059. </div>
  1060. <hr/>
  1061. <footer>
  1062. <h4>
  1063. visit :
  1064. <b>
  1065. https://antoncabon.github.io </b>
  1066. </h4>
  1067. </footer>

3. Customize the modal using the following CSS code. You can modify the CSS rules according to your needs.

  1. @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
  2. body {
  3. background-color: #E0E0E0;
  4. font-family: 'Roboto', sans-serif
  5. }
  6. a[data-toggle="modal"] {
  7. margin: 5px;
  8. }
  9. .title {
  10. color: #757575;
  11. font-weight: bold;
  12. }
  13. .modal {
  14. text-align: left;
  15. }
  16. .modal-content {
  17. border: none;
  18. border-radius: 2px;
  19. box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
  20. }
  21. .modal-header{
  22. border-bottom: 0;
  23. padding-top: 15px;
  24. padding-right: 26px;
  25. padding-left: 26px;
  26. padding-bottom: 0px;
  27. }
  28. .modal-title {
  29. font-size: 34px;
  30. }
  31. .modal-body{
  32. border-bottom: 0;
  33. padding-top: 5px;
  34. padding-right: 26px;
  35. padding-left: 26px;
  36. padding-bottom: 10px;
  37. font-size: 15px;
  38. }
  39. .modal-footer {
  40. border-top:0;
  41. padding-top: 0px;
  42. padding-right:26px;
  43. padding-bottom:26px;
  44. padding-left:26px;
  45. }
  46. .btn-default,.btn-primary {
  47. border: none;
  48. border-radius: 2px;
  49. display: inline-block;
  50. color: #424242;
  51. background-color: #FFF;
  52. text-align: center;
  53. height: 36px;
  54. line-height: 36px;
  55. outline: 0;
  56. padding: 0 2rem;
  57. vertical-align: middle;
  58. -webkit-tap-highlight-color: transparent;
  59. box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  60. letter-spacing: .5px;
  61. transition: .2s ease-out;
  62. }
  63. .btn-default:hover{
  64. background-color: #FFF;
  65. box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
  66. }
  67. .btn-primary {
  68. color: #FFF;
  69. background-color: #2980B9;
  70. }
  71. .btn-primary:hover{
  72. background-color: #2980B9;
  73. box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
  74. }
  75. footer {
  76. text-align: center;
  77. margin: 15px;
  78. }
  79. footer h4{
  80. font-size: 2.92rem;
  81. font-weight:100;
  82. margin: 1.46rem 0 1.168rem;
  83. }
  84.  
  85. /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}

4. Load the jQuery, Bootstrap JS, and Velocity JS by adding the following scripts before closing the body tag:

  1. <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  2. <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
  3. <script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js'></script>
  4. <script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js'></script>

5. Finally, initialize the animation effects by adding the following script between the <script> tag just after the above dependencies.

  1. $(".modal").each(function(l){$(this).on("show.bs.modal",function(l){var o=$(this).attr("data-easein");"shake"==o?$(".modal-dialog").velocity("callout."+o):"pulse"==o?$(".modal-dialog").velocity("callout."+o):"tada"==o?$(".modal-dialog").velocity("callout."+o):"flash"==o?$(".modal-dialog").velocity("callout."+o):"bounce"==o?$(".modal-dialog").velocity("callout."+o):"swing"==o?$(".modal-dialog").velocity("callout."+o):$(".modal-dialog").velocity("transition."+o)})});

That’s it! hopefully, you have successfully created the Bootstrap modal with animation effects. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X