{"id":89213,"date":"2025-07-12T22:59:55","date_gmt":"2025-07-12T15:59:55","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=89213"},"modified":"2025-07-12T23:01:38","modified_gmt":"2025-07-12T16:01:38","slug":"modal-bootstrap-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/","title":{"rendered":"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Modal_Bootstrap_la_gi\" >Modal Bootstrap l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Vai_tro_cua_Modal\" >Vai tr\u00f2 c\u1ee7a Modal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Uu_diem_va_han_che_khi_dung_Modal_trong_thiet_ke_UXUI\" >\u01afu \u0111i\u1ec3m v\u00e0 h\u1ea1n ch\u1ebf khi d\u00f9ng Modal trong thi\u1ebft k\u1ebf UX\/UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Cac_thanh_phan_chinh_cua_Modal_Bootstrap\" >C\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a Modal Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Mot_so_truong_hop_su_dung_Modal_Bootstrap\" >M\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Modal Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Huong_dan_tuy_chinh_kich_thuoc_va_vi_tri_Modal\" >H\u01b0\u1edbng d\u1eabn t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc v\u00e0 v\u1ecb tr\u00ed Modal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Cach_dieu_khien_Modal_bang_JavaScript\" >C\u00e1ch \u0111i\u1ec1u khi\u1ec3n Modal b\u1eb1ng JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Tuy_chinh_nang_cao_cho_Modal_Bootstrap\" >T\u00f9y ch\u1ec9nh n\u00e2ng cao cho Modal Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Cac_luu_y_quan_trong_khi_su_dung_Modal\" >C\u00e1c l\u01b0u \u00fd quan tr\u1ecdng khi s\u1eed d\u1ee5ng Modal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Cac_cau_hoi_thuong_gap_ve_Modal_Bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Modal Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, b\u1ea1n th\u01b0\u1eddng s\u1ebd g\u1eb7p nhu c\u1ea7u hi\u1ec3n th\u1ecb c\u00e1c c\u1eeda s\u1ed5 n\u1ed5i b\u1eadt nh\u01b0 h\u1ed9p tho\u1ea1i th\u00f4ng b\u00e1o, form nh\u1eadp li\u1ec7u ho\u1eb7c h\u00ecnh \u1ea3nh xu\u1ea5t hi\u1ec7n n\u1ed5i l\u00ean tr\u00ean giao di\u1ec7n ch\u00ednh. Modal trong Bootstrap ch\u00ednh l\u00e0 c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi gi\u00fap b\u1ea1n th\u1ef1c hi\u1ec7n vi\u1ec7c n\u00e0y m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, nhanh ch\u00f3ng v\u00e0 \u0111\u1eb9p m\u1eaft v\u1edbi hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng nh\u1eb9 nh\u00e0ng.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y, b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c t\u00ecm hi\u1ec3u:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modal Bootstrap d\u00f9ng \u0111\u1ec3 l\u00e0m g\u00ec? C\u00f3 \u01b0u &#8211; nh\u01b0\u1ee3c \u0111i\u1ec3m g\u00ec?<\/li>\n\n\n\n<li>C\u00e1ch s\u1eed d\u1ee5ng Modal v\u1edbi HTML v\u00e0 JavaScript<\/li>\n\n\n\n<li>C\u00e1ch t\u00f9y ch\u1ec9nh Modal (k\u00edch th\u01b0\u1edbc, n\u1ec1n m\u1edd ph\u00eda sau,&#8230;)<\/li>\n\n\n\n<li>Nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng khi s\u1eed d\u1ee5ng Modal trong Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-modal-bootstrap-la-gi\"><span class=\"ez-toc-section\" id=\"Modal_Bootstrap_la_gi\"><\/span><strong>Modal Bootstrap l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Modal trong <a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> l\u00e0 m\u1ed9t h\u1ed9p tho\u1ea1i n\u1ed5i (pop-up), hi\u1ec3n th\u1ecb l\u00ean tr\u00ean t\u1ea5t c\u1ea3 n\u1ed9i dung trang, ch\u1eb7n ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi ph\u1ea7n n\u1ec1n b\u00ean d\u01b0\u1edbi. V\u1ec1 b\u1ea3n ch\u1ea5t, \u0111\u00e2y l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng t\u1eeb HTML, CSS v\u00e0 JavaScript, \u0111\u1eb7t \u1edf v\u1ecb tr\u00ed c\u1ed1 \u0111\u1ecbnh (position: fixed), v\u00e0 khi \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t s\u1ebd t\u1ef1 \u0111\u1ed9ng ng\u0103n cu\u1ed9n n\u1ed9i dung trang ngo\u00e0i modal, t\u1eadp trung ng\u01b0\u1eddi d\u00f9ng v\u00e0o ph\u1ea7n n\u1ed9i dung ch\u00ednh b\u00ean trong modal.<\/p>\n\n\n\n<p>C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a Modal g\u1ed3m ba ph\u1ea7n: <strong>header<\/strong> (ti\u00eau \u0111\u1ec1 c\u1ee7a Modal), <strong>body <\/strong>(n\u1ed9i dung ch\u00ednh), v\u00e0 <strong>footer<\/strong> (c\u00e1c n\u00fat h\u00e0nh \u0111\u1ed9ng, l\u1eddi ghi ch\u00fa,&#8230;).&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 modal:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"453\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89369\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35-300x170.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35-640x362.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35-768x434.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-35-1536x869.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vai-tro-c\u1ee7a-modal\"><span class=\"ez-toc-section\" id=\"Vai_tro_cua_Modal\"><\/span><strong>Vai tr\u00f2 c\u1ee7a Modal<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Modal th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o quan tr\u1ecdng, c\u1ea3nh b\u00e1o ho\u1eb7c x\u00e1c nh\u1eadn h\u00e0nh \u0111\u1ed9ng;<\/li>\n\n\n\n<li>Ch\u1ee9a form nh\u1eadp li\u1ec7u (\u0111\u0103ng nh\u1eadp, \u0111\u0103ng k\u00fd, g\u1eedi ph\u1ea3n h\u1ed3i);<\/li>\n\n\n\n<li>T\u1ea1p ra tr\u1ea3i nghi\u1ec7m xem \u1ea3nh, video, ho\u1eb7c n\u1ed9i dung b\u1ed5 sung \u0111\u1ebfn ng\u01b0\u1eddi d\u00f9ng m\u00e0 kh\u00f4ng di chuy\u1ec3n trang;<\/li>\n\n\n\n<li>Trong c\u00e1c t\u00ecnh hu\u1ed1ng c\u1ea7n ng\u01b0\u1eddi d\u00f9ng t\u1eadp trung v\u00e0o m\u1ed9t h\u00e0nh \u0111\u1ed9ng c\u1ee5 th\u1ec3 v\u00e0 quay tr\u1edf l\u1ea1i m\u00e0n h\u00ecnh hi\u1ec7n t\u1ea1i sau khi x\u1eed l\u00fd \u1edf modal.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-\u01b0u-di\u1ec3m-va-h\u1ea1n-ch\u1ebf-khi-dung-modal-trong-thi\u1ebft-k\u1ebf-ux-ui\"><span class=\"ez-toc-section\" id=\"Uu_diem_va_han_che_khi_dung_Modal_trong_thiet_ke_UXUI\"><\/span><strong>\u01afu \u0111i\u1ec3m v\u00e0 h\u1ea1n ch\u1ebf khi d\u00f9ng Modal trong thi\u1ebft k\u1ebf UX\/UI<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Modal Bootstrap mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch \u0111\u00e1ng k\u1ec3 trong thi\u1ebft k\u1ebf giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, nh\u01b0ng c\u0169ng t\u1ed3n t\u1ea1i m\u1ed9t s\u1ed1 h\u1ea1n ch\u1ebf c\u1ea7n l\u01b0u \u00fd. Vi\u1ec7c hi\u1ec3u r\u00f5 nh\u1eefng \u01b0u, nh\u01b0\u1ee3c \u0111i\u1ec3m n\u00e0y s\u1ebd gi\u00fap b\u1ea1n \u00e1p d\u1ee5ng Modal Bootstrap m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3 v\u00e0 ph\u00f9 h\u1ee3p h\u01a1n v\u1edbi t\u1eebng ng\u1eef c\u1ea3nh c\u1ee5 th\u1ec3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-\u01b0u-di\u1ec3m\"><strong>\u01afu \u0111i\u1ec3m<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>L\u00e0 th\u00e0nh ph\u1ea7n c\u00f3 s\u1eb5n c\u1ee7a Bootstrap, gi\u00fap vi\u1ec7c ph\u00e1t tri\u1ec3n \u0111\u01b0\u1ee3c nhanh ch\u00f3ng<\/li>\n\n\n\n<li>T\u1eadp trung s\u1ef1 ch\u00fa \u00fd c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u00e0o th\u00f4ng tin ho\u1eb7c h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng m\u00e0 kh\u00f4ng l\u00e0m gi\u00e1n \u0111o\u1ea1n b\u1ed1 c\u1ee5c t\u1ed5ng th\u1ec3<\/li>\n\n\n\n<li>Ti\u1ebft ki\u1ec7m kh\u00f4ng gian giao di\u1ec7n, tr\u00e1nh chuy\u1ec3n h\u01b0\u1edbng sang trang m\u1edbi, gi\u00fap tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng li\u1ec1n m\u1ea1ch h\u01a1n<\/li>\n\n\n\n<li>C\u00f3 s\u1eb5n c\u00e1c hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng v\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh linh ho\u1ea1t, gi\u00fap b\u1ea1n t\u1ea1o ra tr\u1ea3i nghi\u1ec7m h\u1ea5p d\u1eabn, th\u00e2n thi\u1ec7n ng\u01b0\u1eddi d\u00f9ng<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nh\u01b0\u1ee3c-di\u1ec3m\"><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/strong><\/h3>\n\n\n\n<p>Tuy nhi\u00ean, Modal c\u0169ng c\u00f3 m\u1ed9t s\u1ed1 \u0111i\u1ec3m y\u1ebfu c\u1ea7n \u0111\u01b0\u1ee3c c\u00e2n nh\u1eafc k\u1ef9 tr\u01b0\u1edbc khi \u00e1p d\u1ee5ng r\u1ed9ng r\u00e3i:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vi\u1ec7c s\u1eed d\u1ee5ng qu\u00e1 nhi\u1ec1u ho\u1eb7c hi\u1ec3n th\u1ecb Modal ch\u1ed3ng ch\u00e9o c\u00f3 th\u1ec3 khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng c\u1ea3m th\u1ea5y b\u1ed1i r\u1ed1i, kh\u00f3 thao t\u00e1c v\u00e0 g\u00e2y m\u1ea5t t\u1eadp trung<\/li>\n\n\n\n<li>V\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt, v\u1ecb tr\u00ed c\u1ed1 \u0111\u1ecbnh (position: fixed) \u0111\u00f4i khi g\u00e2y kh\u00f3 kh\u0103n khi t\u00edch h\u1ee3p v\u00e0o b\u1ed1 c\u1ee5c hi\u1ec7n c\u00f3, nh\u1ea5t l\u00e0 khi layout c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb ri\u00eang<\/li>\n\n\n\n<li>Tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng, Modal ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u t\u1ed1t c\u00f3 th\u1ec3 che khu\u1ea5t n\u1ed9i dung quan tr\u1ecdng ho\u1eb7c g\u00e2y kh\u00f3 kh\u0103n khi thao t\u00e1c b\u1eb1ng c\u1ea3m \u1ee9ng<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thanh-ph\u1ea7n-chinh-c\u1ee7a-modal-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_thanh_phan_chinh_cua_Modal_Bootstrap\"><\/span><strong>C\u00e1c th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a Modal Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t Modal ho\u00e0n ch\u1ec9nh trong Bootstrap bao g\u1ed3m c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 sau:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nut-kich-ho\u1ea1t-modal-trigger-button\"><strong>N\u00fat k\u00edch ho\u1ea1t Modal (Trigger Button)<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 n\u00fat (ho\u1eb7c li\u00ean k\u1ebft) gi\u00fap m\u1edf Modal. Th\u00e0nh ph\u1ea7n n\u00e0y th\u01b0\u1eddng c\u00f3 hai thu\u1ed9c t\u00ednh quan tr\u1ecdng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>data-bs-toggle=\u201cmodal\u201d<\/code><\/strong>: Cho bi\u1ebft \u0111\u00e2y l\u00e0 n\u00fat m\u1edf modal<\/li>\n\n\n\n<li><strong><code>data-bs-target=\u201c#idModal\u201d<\/code><\/strong>: X\u00e1c \u0111\u1ecbnh ID c\u1ee7a modal s\u1ebd hi\u1ec3n th\u1ecb<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&lt;button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#idModal\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;N\u00fat m\u1edf modal\n&nbsp;&nbsp;&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>Tuy nhi\u00ean, trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, Modal c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t b\u1edfi JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ph\u1ea7n-modal-chinh\"><strong>Ph\u1ea7n Modal ch\u00ednh<\/strong><\/h3>\n\n\n\n<p>Modal \u0111\u01b0\u1ee3c khai b\u00e1o trong m\u1ed9t th\u1ebb <strong><code>&lt;div&gt;<\/code> <\/strong>c\u00f3 l\u1edbp <strong><code>.modal<\/code><\/strong>. N\u00f3 l\u00e0 container ch\u00ednh ch\u1ee9a to\u00e0n b\u1ed9 n\u1ed9i dung modal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-hidden=\"true\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"modal-dialog\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"modal-content\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- C\u00e1c th\u00e0nh ph\u1ea7n kh\u00e1c (header, body, footer) s\u1ebd n\u1eb1m \u1edf \u0111\u00e2y --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch t\u1eebng class ch\u00ednh:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>modal<\/code><\/strong>: x\u00e1c \u0111\u1ecbnh \u0111\u00e2y l\u00e0 m\u1ed9t c\u1eeda s\u1ed5 Modal.<\/li>\n\n\n\n<li><strong><code>fade<\/code><\/strong>: t\u1ea1o hi\u1ec7u \u1ee9ng xu\u1ea5t hi\u1ec7n nh\u1eb9 nh\u00e0ng khi m\u1edf modal.<\/li>\n\n\n\n<li><strong><code>modal-dialog<\/code><\/strong>: l\u00e0 khung ch\u1ee9a modal, gi\u00fap x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc v\u00e0 v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb.<\/li>\n\n\n\n<li><strong><code>modal-content<\/code><\/strong>: \u0111\u1ecbnh d\u1ea1ng v\u00f9ng ch\u1ee9a to\u00e0n b\u1ed9 n\u1ed9i dung modal (header, body, footer).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ph\u1ea7n-d\u1ea7u-modal-modal-header\"><strong>Ph\u1ea7n \u0111\u1ea7u Modal (Modal Header)<\/strong><\/h4>\n\n\n\n<p>N\u1eb1m b\u00ean trong <strong><code>&lt;div class=\u201cmodal-header\u201d&gt;<\/code><\/strong>, ph\u1ea7n n\u00e0y th\u01b0\u1eddng ch\u1ee9a ti\u00eau \u0111\u1ec1 v\u00e0 n\u00fat \u0111\u00f3ng.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>         &lt;div class=\"modal-header\"&gt;\n             &lt;h5 class=\"modal-title\"&gt;Ti\u00eau \u0111\u1ec1 c\u1ee7a Modal&lt;\/h5&gt;\n             &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n           &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>modal-header<\/code><\/strong>: ph\u1ea7n \u0111\u1ea7u Modal, c\u00f3 \u0111\u1ecbnh d\u1ea1ng r\u00f5 r\u00e0ng, th\u01b0\u1eddng ch\u1ee9a ti\u00eau \u0111\u1ec1 v\u00e0 n\u00fat \u0111\u00f3ng.<\/li>\n\n\n\n<li><strong><code>modal-title<\/code><\/strong>: \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n ti\u00eau \u0111\u1ec1 Modal.<\/li>\n\n\n\n<li><strong><code>btn-close<\/code><\/strong>: n\u00fat \u0111\u00f3ng modal, khi click s\u1ebd \u0111\u00f3ng modal ngay l\u1eadp t\u1ee9c.<\/li>\n\n\n\n<li>Thu\u1ed9c t\u00ednh <strong><code>data-bs-dismiss=\u201cmodal\u201d<\/code><\/strong> l\u00e0 \u0111\u1ec3 \u0111\u00f3ng modal khi b\u1ea5m v\u00e0o n\u00fat n\u00e0y.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ph\u1ea7n-n\u1ed9i-dung-modal-modal-body\"><strong>Ph\u1ea7n n\u1ed9i dung Modal (Modal Body)<\/strong><\/h4>\n\n\n\n<p>N\u1ed9i dung ch\u00ednh c\u1ee7a Modal \u0111\u01b0\u1ee3c \u0111\u1eb7t trong th\u1ebb <strong><code>&lt;div class=\u201cmodal-body\u201d&gt;<\/code><\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>           &lt;div class=\"modal-body\"&gt;\n             &lt;p&gt;N\u1ed9i dung ch\u00ednh c\u1ee7a modal&lt;\/p&gt;\n           &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch:<\/p>\n\n\n\n<p><strong><code>modal-body<\/code><\/strong>: l\u00e0 v\u00f9ng ch\u1ee9a n\u1ed9i dung ch\u00ednh. B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t b\u1ea5t c\u1ee9 n\u1ed9i dung n\u00e0o \u1edf \u0111\u00e2y t\u00f9y v\u00e0o m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng nh\u01b0: v\u0103n b\u1ea3n, form nh\u1eadp li\u1ec7u, h\u00ecnh \u1ea3nh, video\u2026<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ph\u1ea7n-chan-modal-modal-footer\"><strong>Ph\u1ea7n ch\u00e2n Modal (Modal Footer)<\/strong><\/h4>\n\n\n\n<p>N\u1eb1m trong th\u1ebb <strong><code>&lt;div class=\u201cmodal-footer\u201d&gt;<\/code><\/strong>, ch\u1ee9a c\u00e1c n\u00fat h\u00e0nh \u0111\u1ed9ng nh\u01b0 \u201cL\u01b0u thay \u0111\u1ed5i\u201d, \u201c\u0110\u00f3ng\u201d, hay \u201cG\u1eedi \u0111i\u201d.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>           &lt;div class=\"modal-footer\"&gt;\n             &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;\u0110\u00f3ng&lt;\/button&gt;\n             &lt;button type=\"button\" class=\"btn btn-primary\"&gt;L\u01b0u&lt;\/button&gt;\n           &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>modal-footer<\/code><\/strong>: ph\u1ea7n ch\u00e2n c\u1ee7a modal, n\u01a1i \u0111\u1eb7t c\u00e1c n\u00fat thao t\u00e1c quan tr\u1ecdng. Th\u01b0\u1eddng d\u00f9ng c\u00e1c n\u00fat v\u1edbi class nh\u01b0 <strong><code>.btn-secondary<\/code><\/strong> (\u0111\u00f3ng) ho\u1eb7c<strong> <code>.btn-primary<\/code><\/strong> (x\u00e1c nh\u1eadn h\u00e0nh \u0111\u1ed9ng ch\u00ednh).<\/li>\n\n\n\n<li>Thu\u1ed9c t\u00ednh <strong><code>data-bs-dismiss=\u201cmodal\u201d<\/code><\/strong> t\u01b0\u01a1ng t\u1ef1 nh\u01b0 n\u00fat \u0111\u00f3ng \u1edf ph\u1ea7n header, gi\u00fap \u0111\u00f3ng modal khi click.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 code c\u1ee7a m\u1ed9t Modal Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\"&gt;\n       &lt;div class=\"modal-dialog\"&gt;\n         &lt;div class=\"modal-content\"&gt;\n           &lt;div class=\"modal-header\"&gt;\n             &lt;h5 class=\"modal-title\"&gt;Ti\u00eau \u0111\u1ec1 c\u1ee7a Modal&lt;\/h5&gt;\n             &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"modal-body\"&gt;\n             &lt;p&gt;N\u1ed9i dung ch\u00ednh c\u1ee7a modal&lt;\/p&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"modal-footer\"&gt;\n             &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;\u0110\u00f3ng&lt;\/button&gt;\n             &lt;button type=\"button\" class=\"btn btn-primary\"&gt;L\u01b0u&lt;\/button&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"300\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-36.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89371\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-36.png 673w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-36-300x134.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-36-640x285.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-36-200x89.png 200w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-tr\u01b0\u1eddng-h\u1ee3p-s\u1eed-d\u1ee5ng-modal-bootstrap\"><span class=\"ez-toc-section\" id=\"Mot_so_truong_hop_su_dung_Modal_Bootstrap\"><\/span><strong>M\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng Modal Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Modal l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n r\u1ea5t linh ho\u1ea1t, c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng trong nhi\u1ec1u ng\u1eef c\u1ea3nh kh\u00e1c nhau khi thi\u1ebft k\u1ebf giao di\u1ec7n web. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p ph\u1ed5 bi\u1ebfn m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Modal Bootstrap \u0111\u1ec3 mang l\u1ea1i tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hi\u1ec3n-th\u1ecb-thong-bao-xac-nh\u1eadn-confirmation-dialog\"><strong>Hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o x\u00e1c nh\u1eadn (Confirmation Dialog)<\/strong><\/h3>\n\n\n\n<p>Trong c\u00e1c thao t\u00e1c nh\u01b0 x\u00f3a d\u1eef li\u1ec7u, g\u1eedi \u0111\u01a1n h\u00e0ng, ho\u1eb7c th\u1ef1c hi\u1ec7n h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng, vi\u1ec7c hi\u1ec3n th\u1ecb m\u1ed9t h\u1ed9p tho\u1ea1i x\u00e1c nh\u1eadn gi\u00fap ng\u01b0\u1eddi d\u00f9ng ki\u1ec3m tra l\u1ea1i quy\u1ebft \u0111\u1ecbnh c\u1ee7a m\u00ecnh.<\/p>\n\n\n\n<p>Code v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- N\u00fat k\u00edch ho\u1ea1t Modal --&gt;\n&lt;button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#confirmDeleteModal\"&gt;\n X\u00f3a b\u00e0i vi\u1ebft\n&lt;\/button&gt;\n\n&lt;!-- Modal x\u00e1c nh\u1eadn --&gt;\n&lt;div class=\"modal fade\" id=\"confirmDeleteModal\" tabindex=\"-1\" aria-labelledby=\"confirmDeleteLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\" id=\"confirmDeleteLabel\"&gt;X\u00e1c nh\u1eadn x\u00f3a&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a b\u00e0i vi\u1ebft n\u00e0y kh\u00f4ng?\n     &lt;\/div&gt;\n     &lt;div class=\"modal-footer\"&gt;\n       &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;Hu\u1ef7&lt;\/button&gt;\n       &lt;button type=\"button\" class=\"btn btn-danger\"&gt;X\u00e1c nh\u1eadn x\u00f3a&lt;\/button&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"590\" height=\"249\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-37.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89372\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-37.png 590w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-37-300x127.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-37-200x84.png 200w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nh\u1eadp-li\u1ec7u-ho\u1eb7c-dang-nh\u1eadp\"><strong>Nh\u1eadp li\u1ec7u ho\u1eb7c \u0111\u0103ng nh\u1eadp<\/strong><\/h3>\n\n\n\n<p>Modal r\u1ea5t ph\u00f9 h\u1ee3p \u0111\u1ec3 ch\u1ee9a c\u00e1c form nh\u1eadp li\u1ec7u \u0111\u01a1n gi\u1ea3n nh\u01b0 form \u0111\u0103ng nh\u1eadp, \u0111\u0103ng k\u00fd, kh\u00f4i ph\u1ee5c m\u1eadt kh\u1ea9u, gi\u00fap ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 thao t\u00e1c m\u00e0 kh\u00f4ng c\u1ea7n chuy\u1ec3n h\u01b0\u1edbng trang web.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- N\u00fat m\u1edf Modal \u0111\u0103ng nh\u1eadp --&gt;\n&lt;button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#loginModal\"&gt;\n \u0110\u0103ng nh\u1eadp\n&lt;\/button&gt;\n\n&lt;!-- Modal \u0110\u0103ng nh\u1eadp --&gt;\n&lt;div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-labelledby=\"loginModalLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\" id=\"loginModalLabel\"&gt;\u0110\u0103ng nh\u1eadp t\u00e0i kho\u1ea3n&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       &lt;form&gt;\n         &lt;div class=\"mb-3\"&gt;\n           &lt;label for=\"loginEmail\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n           &lt;input type=\"email\" class=\"form-control\" id=\"loginEmail\" placeholder=\"Nh\u1eadp email\"&gt;\n         &lt;\/div&gt;\n         &lt;div class=\"mb-3\"&gt;\n           &lt;label for=\"loginPassword\" class=\"form-label\"&gt;M\u1eadt kh\u1ea9u&lt;\/label&gt;\n           &lt;input type=\"password\" class=\"form-control\" id=\"loginPassword\" placeholder=\"Nh\u1eadp m\u1eadt kh\u1ea9u\"&gt;\n         &lt;\/div&gt;\n         &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;\u0110\u0103ng nh\u1eadp&lt;\/button&gt;\n       &lt;\/form&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"402\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-38.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89373\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-38.png 757w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-38-300x159.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-38-640x340.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-38-200x106.png 200w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-thong-bao-k\u1ebft-qu\u1ea3-hanh-d\u1ed9ng\"><strong>Th\u00f4ng b\u00e1o k\u1ebft qu\u1ea3 h\u00e0nh \u0111\u1ed9ng<\/strong><\/h3>\n\n\n\n<p>Sau khi ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n thao t\u00e1c nh\u01b0 g\u1eedi form, thanh to\u00e1n&#8230;, modal c\u00f3 th\u1ec3 hi\u1ec7n th\u00f4ng b\u00e1o tr\u1ea1ng th\u00e1i. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal fade\" id=\"successModal\" tabindex=\"-1\" aria-labelledby=\"successModalLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog modal-dialog-centered\"&gt; &lt;!-- Hi\u1ec3n th\u1ecb gi\u1eefa m\u00e0n h\u00ecnh --&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title text-success\" id=\"successModalLabel\"&gt;Th\u00e0nh c\u00f4ng!&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 g\u1eedi th\u00f4ng tin. Ch\u00fang t\u00f4i s\u1ebd li\u00ean h\u1ec7 s\u1edbm!\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;!-- JavaScript k\u00edch ho\u1ea1t t\u1ef1 \u0111\u1ed9ng sau khi submit --&gt;\n&lt;script&gt;\n \/\/ V\u00ed d\u1ee5: Hi\u1ec3n th\u1ecb modal th\u00e0nh c\u00f4ng sau khi form \u0111\u01b0\u1ee3c g\u1eedi th\u00e0nh c\u00f4ng\n \/\/ new bootstrap.Modal(document.getElementById('successModal')).show();\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, model \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t th\u00f4ng qua code Javascript \u0111\u1ec3 b\u1eaft s\u1ef1 ki\u1ec7n sau khi form \u0111\u01b0\u1ee3c g\u1eedi th\u00e0nh c\u00f4ng.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"304\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-39.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89374\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-39.png 657w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-39-300x139.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-39-640x296.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-39-200x93.png 200w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u01b0\u1edbng-d\u1eabn-tuy-ch\u1ec9nh-kich-th\u01b0\u1edbc-va-v\u1ecb-tri-modal\"><span class=\"ez-toc-section\" id=\"Huong_dan_tuy_chinh_kich_thuoc_va_vi_tri_Modal\"><\/span><strong>H\u01b0\u1edbng d\u1eabn t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc v\u00e0 v\u1ecb tr\u00ed Modal<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t trong nh\u1eefng \u0111i\u1ec3m m\u1ea1nh c\u1ee7a Modal trong Bootstrap l\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc v\u00e0 \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng, gi\u00fap b\u1ea1n t\u1ea1o ra giao di\u1ec7n ph\u00f9 h\u1ee3p v\u1edbi nhi\u1ec1u lo\u1ea1i n\u1ed9i dung kh\u00e1c nhau.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-kich-th\u01b0\u1edbc\"><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n m\u1ed9t s\u1ed1 l\u1edbp ti\u1ec7n \u00edch (utility classes) gi\u00fap b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a Modal m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam c\u00e1c class n\u00e0y v\u00e0o th\u00e0nh ph\u1ea7n <strong><code>.modal-dialog<\/code><\/strong>:<\/p>\n\n\n\n<p><strong><code>.modal-sm<\/code><\/strong>: Modal nh\u1ecf (small)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal nh\u1ecf --&gt;\n &lt;div class=\"modal-dialog modal-sm\"&gt;\n   ...\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"210\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-40.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89376\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-40.png 494w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-40-300x128.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-40-200x85.png 200w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/figure>\n\n\n\n<p><strong><code>.modal-lg<\/code><\/strong>: Modal l\u1edbn (large)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal l\u1edbn --&gt;\n &lt;div class=\"modal-dialog modal-lg\"&gt;\n   ...\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"175\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-41.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89377\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-41.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-41-300x66.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-41-640x140.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-41-200x44.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-41-768x168.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong><code>.modal-xl<\/code><\/strong>: Modal r\u1ea5t l\u1edbn (extra large)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal r\u1ea5t l\u1edbn --&gt;\n &lt;div class=\"modal-dialog modal-xl\"&gt;\n   ...\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"136\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-42.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89378\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-42.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-42-300x51.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-42-640x109.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-42-200x34.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-42-768x131.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong><code>.modal-fullscreen<\/code><\/strong>: Modal chi\u1ebfm to\u00e0n b\u1ed9 m\u00e0n h\u00ecnh<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"modal-dialog modal-fullscreen\"&gt;\n   ...\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-v\u1ecb-tri\"><strong>T\u00f9y ch\u1ec9nh v\u1ecb tr\u00ed<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, Modal s\u1ebd xu\u1ea5t hi\u1ec7n s\u00e1t ph\u00eda tr\u00ean (top) c\u1ee7a m\u00e0n h\u00ecnh. V\u00ed d\u1ee5:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-43.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89379\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-43.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-43-300x184.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-43-640x392.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-43-200x123.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-43-768x471.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Nh\u01b0ng b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh l\u1ea1i v\u1ecb tr\u00ed c\u1ee7a Modal n\u1ebfu c\u1ea7n. V\u00ed d\u1ee5:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-can-modal-v\u1ec1-gi\u1eefa-man-hinh\"><strong>C\u0103n Modal v\u1ec1 gi\u1eefa m\u00e0n h\u00ecnh<\/strong><\/h4>\n\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n Modal xu\u1ea5t hi\u1ec7n \u1edf trung t\u00e2m c\u1ee7a m\u00e0n h\u00ecnh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class <strong><code>.modal-dialog-centered<\/code><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal-dialog modal-dialog-centered\"&gt;\n ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal fade\" id=\"modalSmall\" tabindex=\"-1\" aria-labelledby=\"modalSmallLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog modal-dialog-centered\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\" id=\"modalSmallLabel\"&gt;Modal c\u0103n gi\u1eefa&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       \u0110\u00e2y l\u00e0 n\u1ed9i dung modal c\u0103n gi\u1eefa.\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"710\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-44.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89381\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-44.png 689w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-44-291x300.png 291w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-44-621x640.png 621w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-44-194x200.png 194w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-modal-cu\u1ed9n-n\u1ed9i-dung-khi-n\u1ed9i-dung-qua-dai\"><strong>Modal cu\u1ed9n n\u1ed9i dung (khi n\u1ed9i dung qu\u00e1 d\u00e0i)<\/strong><\/h4>\n\n\n\n<p>Khi n\u1ed9i dung Modal c\u00f3 chi\u1ec1u cao l\u1edbn h\u01a1n k\u00edch th\u01b0\u1edbc viewport, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam <strong><code>.modal-dialog-scrollable<\/code><\/strong> \u0111\u1ec3 ph\u1ea7n body c\u1ee7a Modal c\u00f3 th\u1ec3 cu\u1ed9n \u0111\u01b0\u1ee3c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal-dialog modal-dialog-scrollable\"&gt;\n ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal n\u1ed9i dung d\u00e0i --&gt;\n&lt;div class=\"modal fade\" id=\"longContentModal\" tabindex=\"-1\" aria-labelledby=\"longContentModalLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog modal-dialog-scrollable\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\" id=\"longContentModalLabel\"&gt;Modal c\u00f3 n\u1ed9i dung d\u00e0i&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n n\u1ed9i dung r\u1ea5t d\u00e0i. Khi n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u cao c\u1ee7a m\u00e0n h\u00ecnh, ph\u1ea7n th\u00e2n Modal s\u1ebd cu\u1ed9n.&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n       &lt;p&gt;Ph\u1ea7n n\u1ed9i dung l\u1eb7p...&lt;\/p&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-footer\"&gt;\n       &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;\u0110\u00f3ng&lt;\/button&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-di\u1ec1u-khi\u1ec3n-modal-b\u1eb1ng-javascript\"><span class=\"ez-toc-section\" id=\"Cach_dieu_khien_Modal_bang_JavaScript\"><\/span><strong>C\u00e1ch \u0111i\u1ec1u khi\u1ec3n Modal b\u1eb1ng JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u00ean c\u1ea1nh vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh HTML (<strong><code>data-bs-toggle<\/code>, <code>data-bs-target<\/code><\/strong>) \u0111\u1ec3 m\u1edf modal, Bootstrap c\u0169ng cung c\u1ea5p API JavaScript r\u1ea5t m\u1ea1nh m\u1ebd gi\u00fap b\u1ea1n \u0111i\u1ec1u khi\u1ec3n modal linh ho\u1ea1t h\u01a1n. Vi\u1ec7c n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n c\u1ea7n x\u1eed l\u00fd modal theo c\u00e1c t\u00ecnh hu\u1ed1ng \u0111\u1ed9ng (v\u00ed d\u1ee5: m\u1edf modal sau khi submit form, ho\u1eb7c \u0111\u00f3ng modal khi ho\u00e0n th\u00e0nh m\u1ed9t thao t\u00e1c&#8230;).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cac-ph\u01b0\u01a1ng-th\u1ee9c-methods-ph\u1ed5-bi\u1ebfn-c\u1ee7a-modal\"><strong>C\u00e1c ph\u01b0\u01a1ng th\u1ee9c (methods) ph\u1ed5 bi\u1ebfn c\u1ee7a Modal<\/strong><\/h3>\n\n\n\n<p>Bootstrap Modal h\u1ed7 tr\u1ee3 nhi\u1ec1u ph\u01b0\u01a1ng th\u1ee9c gi\u00fap b\u1ea1n c\u00f3 th\u1ec3 ch\u1ee7 \u0111\u1ed9ng \u0111i\u1ec1u khi\u1ec3n modal qua JavaScript. \u0110\u1ea7u ti\u00ean, b\u1ea1n c\u1ea7n kh\u1edfi t\u1ea1o \u0111\u1ed1i t\u01b0\u1ee3ng modal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));<\/code><\/pre>\n\n\n\n<p>C\u00e1c ph\u01b0\u01a1ng th\u1ee9c ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Method<\/strong><\/td><td><strong>Ch\u1ee9c n\u0103ng<\/strong><\/td><\/tr><tr><td><strong>.show()<\/strong><\/td><td>Hi\u1ec3n th\u1ecb modal<\/td><\/tr><tr><td><strong>.hide()<\/strong><\/td><td>\u0110\u00f3ng modal<\/td><\/tr><tr><td><strong>.toggle()<\/strong><\/td><td>\u0110\u1ea3o ng\u01b0\u1ee3c tr\u1ea1ng th\u00e1i modal (n\u1ebfu \u0111ang m\u1edf th\u00ec \u0111\u00f3ng, \u0111ang \u0111\u00f3ng th\u00ec m\u1edf)<\/td><\/tr><tr><td><strong>.dispose()<\/strong><\/td><td>H\u1ee7y modal, gi\u1ea3i ph\u00f3ng b\u1ed9 nh\u1edb<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 k\u00edch ho\u1ea1t hi\u1ec3n th\u1ecb modal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal --&gt;\n&lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog modal-dialog-centered\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\" id=\"exampleModalLabel\"&gt;Modal \u0111i\u1ec1u khi\u1ec3n qua JS&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       Modal n\u00e0y \u0111\u01b0\u1ee3c m\u1edf qua JavaScript!\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;!-- N\u00fat b\u1ea5m m\u1edf modal qua JS --&gt;\n&lt;button type=\"button\" class=\"btn btn-primary\" onclick=\"openModalJS()\"&gt;M\u1edf Modal qua JavaScript&lt;\/button&gt;\n\n&lt;script&gt;\n function openModalJS() {\n   var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));\n   myModal.show();\n }\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, function <strong><code>openModalJS<\/code><\/strong> \u0111\u01b0\u1ee3c g\u1ecdi m\u1ed7i khi button \u0111\u01b0\u1ee3c nh\u1ea5n, function n\u00e0y c\u00f3 nhi\u1ec7m v\u1ee5 kh\u1edfi t\u1ea1o 1 \u0111\u1ed1i t\u01b0\u1ee3ng modal trong javascript v\u00e0 th\u1ef1c hi\u1ec7n h\u00e0m <strong><code>show()<\/code> <\/strong>\u0111\u1ec3 hi\u1ec3n th\u1ecb modal c\u00f3 id l\u00e0 <strong><code>exampleModal<\/code>.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-s\u1ef1-ki\u1ec7n-events-quan-tr\u1ecdng-trong-modal\"><strong>S\u1eed d\u1ee5ng s\u1ef1 ki\u1ec7n (events) quan tr\u1ecdng trong Modal<\/strong><\/h3>\n\n\n\n<p>Bootstrap c\u0169ng h\u1ed7 tr\u1ee3 nhi\u1ec1u s\u1ef1 ki\u1ec7n (events) \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 b\u1eaft c\u00e1c tr\u1ea1ng th\u00e1i khi modal m\u1edf, \u0111\u00f3ng, ho\u00e0n t\u1ea5t,&#8230; \u0110i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n c\u1ea7n th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 ph\u1ee5 nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Load d\u1eef li\u1ec7u khi modal m\u1edf<\/li>\n\n\n\n<li>Reset form khi modal \u0111\u00f3ng<\/li>\n\n\n\n<li>Log th\u00f4ng tin ho\u1eb7c tracking khi modal ho\u1ea1t \u0111\u1ed9ng<\/li>\n<\/ul>\n\n\n\n<p>C\u00e1c s\u1ef1 ki\u1ec7n ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>S\u1ef1 ki\u1ec7n<\/strong><\/td><td><strong>Th\u1eddi \u0111i\u1ec3m x\u1ea3y ra<\/strong><\/td><\/tr><tr><td><strong><code>.show.bs.modal<\/code><\/strong><\/td><td>Khi b\u1eaft \u0111\u1ea7u m\u1edf modal<\/td><\/tr><tr><td><strong><code>.shown.bs.modal<\/code><\/strong><\/td><td>Khi modal \u0111\u00e3 m\u1edf ho\u00e0n t\u1ea5t<\/td><\/tr><tr><td><strong><code>.hide.bs.modal<\/code><\/strong><\/td><td>Khi b\u1eaft \u0111\u1ea7u \u0111\u00f3ng modal<\/td><\/tr><tr><td><strong><code>.hidden.bs.modal<\/code><\/strong><\/td><td>Khi modal \u0111\u00e3 \u0111\u00f3ng ho\u00e0n t\u1ea5t<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 \u0111\u1ec3 ghi log khi modal m\u1edf ho\u1eb7c \u0111\u00f3ng, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal --&gt;\n&lt;div class=\"modal fade\" id=\"logModal\" tabindex=\"-1\" aria-labelledby=\"logModalLabel\" aria-hidden=\"true\"&gt;\n &lt;div class=\"modal-dialog modal-dialog-centered\"&gt;\n   &lt;div class=\"modal-content\"&gt;\n     &lt;div class=\"modal-header\"&gt;\n       &lt;h5 class=\"modal-title\" id=\"logModalLabel\"&gt;Modal c\u00f3 s\u1ef1 ki\u1ec7n&lt;\/h5&gt;\n       &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"&gt;&lt;\/button&gt;\n     &lt;\/div&gt;\n     &lt;div class=\"modal-body\"&gt;\n       Ki\u1ec3m tra console \u0111\u1ec3 xem log khi modal m\u1edf ho\u1eb7c \u0111\u00f3ng!\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;!-- N\u00fat b\u1ea5m m\u1edf modal --&gt;\n&lt;button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#logModal\"&gt;\n M\u1edf modal c\u00f3 s\u1ef1 ki\u1ec7n\n&lt;\/button&gt;\n\n&lt;script&gt;\n var logModal = document.getElementById('logModal');\n\n logModal.addEventListener('show.bs.modal', function () {\n   console.log('Modal \u0111ang b\u1eaft \u0111\u1ea7u m\u1edf...');\n });\n\n logModal.addEventListener('shown.bs.modal', function () {\n   console.log('Modal \u0111\u00e3 m\u1edf xong!');\n });\n\n logModal.addEventListener('hide.bs.modal', function () {\n   console.log('Modal \u0111ang b\u1eaft \u0111\u1ea7u \u0111\u00f3ng...');\n });\n\n logModal.addEventListener('hidden.bs.modal', function () {\n   console.log('Modal \u0111\u00e3 \u0111\u00f3ng xong!');\n });\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: M\u1ed7i l\u1ea7n modal thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i, th\u00f4ng tin \u0111\u01b0\u1ee3c in ra \u1edf console c\u1ee7a tr\u00ecnh duy\u1ec7t:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"171\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89382\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45-300x64.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45-640x137.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45-200x43.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45-768x164.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-45-1536x328.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-nang-cao-cho-modal-bootstrap\"><span class=\"ez-toc-section\" id=\"Tuy_chinh_nang_cao_cho_Modal_Bootstrap\"><\/span><strong>T\u00f9y ch\u1ec9nh n\u00e2ng cao cho Modal Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-them-hi\u1ec7u-\u1ee9ng-chuy\u1ec3n-d\u1ed9ng-cho-modal\"><strong>Th\u00eam hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng cho Modal<\/strong><\/h3>\n\n\n\n<p>Khi s\u1eed d\u1ee5ng modal, Bootstrap c\u00f3 cung c\u1ea5p class <strong><code>.fade<\/code><\/strong> \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng m\u1edd d\u1ea7n (fade-in \/ fade-out), t\u1ee9c l\u00e0 opacity t\u1eeb 0 \u0111\u1ebfn 1 khi m\u1edf, v\u00e0 ng\u01b0\u1ee3c l\u1ea1i khi \u0111\u00f3ng.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Modal n\u1ed9i dung d\u00e0i --&gt;\n&lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\"&gt;\n  ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Tuy nhi\u00ean, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p th\u00eam c\u00e1c animation kh\u00e1c \u0111\u1ec3 modal tr\u1edf n\u00ean sinh \u0111\u1ed9ng h\u01a1n, v\u00ed d\u1ee5 nh\u01b0 tr\u01b0\u1ee3t t\u1eeb d\u01b0\u1edbi l\u00ean, ho\u1eb7c ph\u00f3ng to t\u1eeb gi\u1eefa m\u00e0n h\u00ecnh. M\u1ed9t trong nh\u1eefng hi\u1ec7u \u1ee9ng d\u1ec5 \u00e1p d\u1ee5ng nh\u1ea5t l\u00e0 <strong><code>slide-in<\/code><\/strong>, gi\u00fap modal xu\u1ea5t hi\u1ec7n t\u1eeb ph\u00eda d\u01b0\u1edbi l\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n@keyframes slideInUp {\n from {\n   transform: translateY(100px);\n   opacity: 0;\n }\n to {\n   transform: translateY(0);\n   opacity: 1;\n }\n}\n\n\n#exampleModal {\n animation: slideInUp 0.5s ease-out;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>@keyframes slideInUp<\/code><\/strong>: \u0111\u1ecbnh ngh\u0129a hi\u1ec7u \u1ee9ng slide-in cho \u0111\u1ed1i t\u01b0\u1ee3ng<\/li>\n\n\n\n<li>G\u00e1n hi\u1ec7u \u1ee9ng v\u00e0o modal ch\u1ec9 \u0111\u1ecbnh b\u1eb1ng thu\u1ed9c t\u00ednh <strong><code>animation<\/code><\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-modal-responsive-va-t\u1ed1i-\u01b0u-hi\u1ec3n-th\u1ecb-tren-di-d\u1ed9ng\"><strong>Modal responsive v\u00e0 t\u1ed1i \u01b0u hi\u1ec3n th\u1ecb tr\u00ean di \u0111\u1ed9ng<\/strong><\/h3>\n\n\n\n<p>Modal trong Bootstrap v\u1ed1n \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf responsive s\u1eb5n. Tuy nhi\u00ean, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 th\u00eam nhi\u1ec1u class gi\u00fap b\u1ea1n ki\u1ec3m so\u00e1t t\u1ed1t h\u01a1n c\u00e1ch hi\u1ec3n th\u1ecb modal tr\u00ean t\u1eebng lo\u1ea1i thi\u1ebft b\u1ecb b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p v\u1edbi c\u00e1c breakpoints nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.modal-dialog-centered<\/code>:<\/strong>\u00a0c\u0103n gi\u1eefa modal<\/li>\n\n\n\n<li><strong><code>.modal-fullscreen<\/code>:<\/strong>\u00a0fullscreen m\u1ecdi thi\u1ebft b\u1ecb<\/li>\n\n\n\n<li><strong><code>.modal-fullscreen-sm-down<\/code>:<\/strong>\u00a0fullscreen n\u1ebfu m\u00e0n h\u00ecnh nh\u1ecf h\u01a1n sm (576px)<\/li>\n\n\n\n<li><strong><code>.modal-fullscreen-md-down<\/code>:<\/strong>\u00a0fullscreen n\u1ebfu m\u00e0n h\u00ecnh nh\u1ecf h\u01a1n md (768px)<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal-dialog modal-lg modal-dialog-centered modal-fullscreen-sm-down\"&gt;\n ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ean desktop: modal hi\u1ec3n th\u1ecb l\u1edbn, c\u0103n gi\u1eefa v\u1edbi <strong><code>.modal-lg<\/code>, <code>.modal-dialog-centered<\/code><\/strong><\/li>\n\n\n\n<li>Tr\u00ean mobile: modal chi\u1ebfm fullscreen gi\u00fap d\u1ec5 \u0111\u1ecdc v\u00e0 thao t\u00e1c v\u1edbi <strong><code>.modal-fullscreen-sm-down<\/code><\/strong><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ngan-dong-modal-khi-click-ra-ngoai\"><strong>Ng\u0103n \u0111\u00f3ng Modal khi click ra ngo\u00e0i<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, Modal Bootstrap s\u1ebd \u0111\u01b0\u1ee3c \u1ea9n khi ng\u01b0\u1eddi d\u00f9ng click ra khu v\u1ef1c b\u00ean ngo\u00e0i n\u1ed9i dung modal. Nh\u01b0 h\u00ecnh \u1ea3nh b\u00ean d\u01b0\u1edbi, ch\u1ec9 c\u1ea7n click v\u00f9ng b\u00ean ngo\u00e0i khu v\u1ef1c m\u00e0u \u0111\u1ecf, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 t\u1eaft modal:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"528\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46.png\" alt=\"modal bootstrap l\u00e0 g\u00ec - itviec blog\" class=\"wp-image-89383\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46-300x198.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46-640x422.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46-200x132.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46-768x506.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/image-46-1536x1013.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p khi b\u1ea1n mu\u1ed1n modal kh\u00f4ng b\u1ecb \u0111\u00f3ng l\u00fac ng\u01b0\u1eddi d\u00f9ng click ra ngo\u00e0i v\u00f9ng modal ho\u1eb7c b\u1ea5m ESC (d\u00f9ng cho c\u00e1c modal quan tr\u1ecdng nh\u01b0 x\u00e1c nh\u1eadn xo\u00e1, modal b\u1ea3o m\u1eadt&#8230;), b\u1ea1n c\u00f3 th\u1ec3 th\u00eam c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>data-bs-backdrop=\u201cstatic\u201d<\/code><\/strong>: Ng\u0103n modal b\u1ecb \u0111\u00f3ng khi click ra ngo\u00e0i<\/li>\n\n\n\n<li><strong><code>data-bs-keyboard=\u201cfalse\u201d<\/code><\/strong>: Ng\u0103n modal b\u1ecb \u0111\u00f3ng khi b\u1ea5m n\u00fat ESC tr\u00ean b\u00e0n ph\u00edm<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal fade\" id=\"staticBackdrop\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" tabindex=\"-1\"&gt;\n ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-giao-di\u1ec7n-modal-qua-css-va-sass\"><strong>T\u00f9y ch\u1ec9nh giao di\u1ec7n Modal qua CSS v\u00e0 Sass<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, modal c\u1ee7a Bootstrap c\u00f3 giao di\u1ec7n kh\u00e1 t\u1ed1i gi\u1ea3n: n\u1ec1n tr\u1eafng, bo g\u00f3c nh\u1eb9, header c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n d\u01b0\u1edbi m\u1ea3nh, ph\u1ea7n footer c\u00f3 vi\u1ec1n tr\u00ean, c\u00f9ng m\u1ed9t ch\u00fat shadow \u0111\u1ec3 n\u1ed5i l\u00ean tr\u00ean n\u1ed9i dung trang.<\/p>\n\n\n\n<p>Khi c\u1ea7n l\u00e0m \u0111\u1eb9p h\u01a1n cho modal \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi phong c\u00e1ch c\u1ee7a website, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh th\u00f4ng qua c\u00e1c bi\u1ebfn Sass (n\u1ebfu d\u00f9ng SCSS) ho\u1eb7c ghi \u0111\u00e8 b\u1eb1ng CSS th\u00f4ng th\u01b0\u1eddng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-modal-b\u1eb1ng-sass\"><strong>T\u00f9y ch\u1ec9nh Modal b\u1eb1ng Sass<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng Sass, b\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 c\u00e1c bi\u1ebfn CSS \u0111\u1ec3 \u00e1p d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng m\u1edbi cho c\u00e1c modal. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$modal-content-bg: #fff; \/\/ \u0111\u1ed5i m\u00e0u n\u1ec1n\n$modal-content-color: #212529; \/\/ \u0111\u1ed5i m\u00e0u ch\u1eef\n$modal-header-border-color: #dee2e6; \/\/ \u0111\u1ed5i m\u00e0u vi\u1ec1n tr\u00ean\n$modal-footer-border-color: #dee2e6; \/\/ \u0111\u1ed5i m\u00e0u vi\u1ec1n d\u01b0\u1edbi<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-b\u1eb1ng-css-th\u01b0\u1eddng\"><strong>T\u00f9y ch\u1ec9nh b\u1eb1ng CSS th\u01b0\u1eddng<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i vi\u1ec7c s\u1eed d\u1ee5ng Sass, b\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 c\u00e1c class m\u00e0 Modal s\u1eed d\u1ee5ng ho\u1eb7c t\u1ea1o c\u00e1c class CSS c\u1ee7a ri\u00eang m\u00ecnh \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng Modal, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.modal-content {\n&nbsp; background-color: #f0f9ff;\n&nbsp; border-radius: 12px;\n&nbsp; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header {\n&nbsp; border-bottom: 3px solid #0d6efd;\n&nbsp; background-color: #e6f0ff;\n}\n\n.modal-footer-custom {\n&nbsp; background-color: #f9f9f9;\n&nbsp; border-top: none;\n&nbsp; padding: 1.5rem;\n}<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.modal-content<\/code>, <code>.model-header<\/code><\/strong> l\u00e0 c\u00e1c class c\u00f3 s\u1eb5n m\u00e0 modal s\u1eed d\u1ee5ng, \u0111\u01b0\u1ee3c ghi \u0111\u00e8 l\u1ea1i \u0111\u1ec3 \u00e1p d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng m\u1edbi.<\/li>\n\n\n\n<li><strong><code>.model-footer-custom<\/code><\/strong> l\u00e0 class t\u1ef1 \u0111\u1ecbnh ngh\u0129a v\u00e0 s\u1eed d\u1ee5ng k\u00e8m v\u1edbi<strong> <code>.modal-footer<\/code><\/strong><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-l\u01b0u-y-quan-tr\u1ecdng-khi-s\u1eed-d\u1ee5ng-modal\"><span class=\"ez-toc-section\" id=\"Cac_luu_y_quan_trong_khi_su_dung_Modal\"><\/span><strong>C\u00e1c l\u01b0u \u00fd quan tr\u1ecdng khi s\u1eed d\u1ee5ng Modal<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 Modal Bootstrap l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 r\u1ea5t m\u1ea1nh \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung n\u1ed5i b\u1eadt tr\u00ean giao di\u1ec7n web, nh\u01b0ng n\u1ebfu l\u1ea1m d\u1ee5ng ho\u1eb7c s\u1eed d\u1ee5ng kh\u00f4ng h\u1ee3p l\u00fd, modal c\u00f3 th\u1ec3 g\u00e2y \u1ea3nh h\u01b0\u1edfng ti\u00eau c\u1ef1c \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. Khi \u00e1p d\u1ee5ng modal v\u00e0o d\u1ef1 \u00e1n th\u1ef1c t\u1ebf, b\u1ea1n n\u00ean l\u01b0u \u00fd m\u1ed9t s\u1ed1 \u0111i\u1ec3m sau \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u qu\u1ea3 s\u1eed d\u1ee5ng v\u00e0 s\u1ef1 th\u00e2n thi\u1ec7n cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ch\u1ec9 s\u1eed d\u1ee5ng modal khi th\u1ef1c s\u1ef1 c\u1ea7n thi\u1ebft:<\/strong> Modal n\u00ean \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin ho\u1eb7c h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng c\u1ea7n s\u1ef1 t\u1eadp trung cao c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. Kh\u00f4ng n\u00ean l\u1ea1m d\u1ee5ng modal cho c\u00e1c n\u1ed9i dung ph\u1ee5 ho\u1eb7c th\u00f4ng tin c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb tr\u1ef1c ti\u1ebfp tr\u00ean trang.<\/li>\n\n\n\n<li><strong>H\u1ea1n ch\u1ebf m\u1edf nhi\u1ec1u modal ch\u1ed3ng l\u00ean nhau: <\/strong>Kh\u00f4ng n\u00ean m\u1edf nhi\u1ec1u modal c\u00f9ng l\u00fac (modal stacking), v\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng b\u1ecb r\u1ed1i v\u00e0 kh\u00f3 thao t\u00e1c. Ch\u1ec9 n\u00ean hi\u1ec3n th\u1ecb t\u1ed1i \u0111a 1 modal t\u1ea1i m\u1ed9t th\u1eddi \u0111i\u1ec3m.<\/li>\n\n\n\n<li><strong>Ki\u1ec3m so\u00e1t c\u00e1ch \u0111\u00f3ng modal: <\/strong>V\u1edbi nh\u1eefng modal c\u1ea7n ng\u01b0\u1eddi d\u00f9ng b\u1eaft bu\u1ed9c thao t\u00e1c (v\u00ed d\u1ee5: modal x\u00e1c nh\u1eadn xo\u00e1, modal \u0111i\u1ec1n th\u00f4ng tin b\u1eaft bu\u1ed9c), h\u00e3y s\u1eed d\u1ee5ng <code>data-bs-backdrop=\"static\"<\/code> v\u00e0 <code>data-bs-keyboard=\"false\"<\/code> \u0111\u1ec3 tr\u00e1nh vi\u1ec7c ng\u01b0\u1eddi d\u00f9ng click ra ngo\u00e0i ho\u1eb7c nh\u1ea5n ESC l\u00e0m m\u1ea5t modal khi ch\u01b0a ho\u00e0n th\u00e0nh h\u00e0nh \u0111\u1ed9ng.<\/li>\n\n\n\n<li><strong>\u0110\u1ea3m b\u1ea3o h\u00e0nh vi r\u00f5 r\u00e0ng khi submit form trong modal: <\/strong>Khi modal ch\u1ee9a form, sau khi x\u1eed l\u00fd xong (submit th\u00e0nh c\u00f4ng), c\u1ea7n \u0111\u00f3ng modal r\u00f5 r\u00e0ng ho\u1eb7c hi\u1ec3n th\u1ecb tr\u1ea1ng th\u00e1i k\u1ebft qu\u1ea3 \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng b\u1ecb hi\u1ec3u nh\u1ea7m l\u00e0 modal b\u1ecb l\u1ed7i ho\u1eb7c trang web b\u1ecb treo.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-modal-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Modal_Bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Modal Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-hi\u1ec3n-th\u1ecb-d\u1ed3ng-th\u1eddi-nhi\u1ec1u-modal-d\u01b0\u1ee3c-khong\"><strong>C\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb \u0111\u1ed3ng th\u1eddi nhi\u1ec1u Modal \u0111\u01b0\u1ee3c kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Bootstrap cho ph\u00e9p b\u1ea1n c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb nhi\u1ec1u modal ch\u1ed3ng l\u00ean nhau (modal stacking). Tuy nhi\u00ean, \u0111\u00e2y l\u00e0 \u0111i\u1ec1u kh\u00f4ng \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch trong thi\u1ebft k\u1ebf giao di\u1ec7n. Khi c\u00f3 nhi\u1ec1u modal c\u00f9ng m\u1edf, ng\u01b0\u1eddi d\u00f9ng r\u1ea5t d\u1ec5 b\u1ecb r\u1ed1i ho\u1eb7c m\u1ea5t ph\u01b0\u01a1ng h\u01b0\u1edbng tr\u00ean m\u00e0n h\u00ecnh, nh\u1ea5t l\u00e0 khi c\u00e1c modal c\u00f3 n\u1ed9i dung ho\u1eb7c k\u00edch th\u01b0\u1edbc kh\u00e1c nhau.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-modal-dong-l\u1ea1i-khi-nh\u1ea5n-vao-vung-ben-ngoai\"><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 Modal \u0111\u00f3ng l\u1ea1i khi nh\u1ea5n v\u00e0o v\u00f9ng b\u00ean ngo\u00e0i?<\/strong><\/h3>\n\n\n\n<p>Theo m\u1eb7c \u0111\u1ecbnh, modal c\u1ee7a Bootstrap s\u1ebd t\u1ef1 \u0111\u00f3ng khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o v\u00f9ng n\u1ec1n m\u1edd (backdrop) ph\u00eda sau modal. \u0110\u00e2y l\u00e0 h\u00e0nh vi gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng tho\u00e1t modal khi kh\u00f4ng c\u00f3 nhu c\u1ea7u t\u01b0\u01a1ng t\u00e1c ti\u1ebfp.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n \u0111\u00e3 d\u00f9ng thu\u1ed9c t\u00ednh <strong><code>data-bs-backdrop=\u201cstatic\u201d<\/code><\/strong> th\u00ec modal s\u1ebd kh\u00f4ng \u0111\u00f3ng khi click ra ngo\u00e0i. L\u00fac n\u00e0y, n\u1ebfu mu\u1ed1n kh\u00f4i ph\u1ee5c h\u00e0nh vi \u0111\u00f3ng nh\u01b0 m\u1eb7c \u0111\u1ecbnh, ch\u1ec9 c\u1ea7n b\u1ecf thu\u1ed9c t\u00ednh <strong><code>data-bs-backdrop=\u201cstatic\u201d<\/code><\/strong> ra kh\u1ecfi th\u1ebb modal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-modal-co-h\u1ed7-tr\u1ee3-hi\u1ec7u-\u1ee9ng-chuy\u1ec3n-d\u1ed9ng-animation-khong\"><strong>Modal c\u00f3 h\u1ed7 tr\u1ee3 hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng (animation) kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 s\u1eb5n hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng khi m\u1edf v\u00e0 \u0111\u00f3ng modal th\u00f4ng qua class .fade. Khi s\u1eed d\u1ee5ng <code>.fade<\/code>, modal s\u1ebd c\u00f3 hi\u1ec7u \u1ee9ng m\u1edd d\u1ea7n (fade-in) khi m\u1edf v\u00e0 m\u1edd \u0111i (fade-out) khi \u0111\u00f3ng.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\"&gt;\n ...\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 ho\u00e0n to\u00e0n t\u1ef1 th\u00eam c\u00e1c animation kh\u00e1c nh\u01b0 slide, zoom, bounce b\u1eb1ng c\u00e1ch vi\u1ebft th\u00eam CSS ho\u1eb7c s\u1eed d\u1ee5ng c\u00e1c th\u01b0 vi\u1ec7n animation nh\u01b0 Animate.css.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Modal l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n h\u1eefu \u00edch trong Bootstrap, gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng hi\u1ec3n th\u1ecb c\u00e1c c\u1eeda s\u1ed5 n\u1ed5i b\u1eadt, ph\u1ee5c v\u1ee5 nhi\u1ec1u m\u1ee5c \u0111\u00edch kh\u00e1c nhau nh\u01b0 th\u00f4ng b\u00e1o, x\u00e1c nh\u1eadn h\u00e0nh \u0111\u1ed9ng, nh\u1eadp li\u1ec7u ho\u1eb7c tr\u00ecnh b\u00e0y n\u1ed9i dung chi ti\u1ebft. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hy v\u1ecdng \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc c\u00e1i nh\u00ecn to\u00e0n di\u1ec7n v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng Modal trong Bootstrap, t\u1eeb c\u00e1c kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n, c\u00e1ch tri\u1ec3n khai th\u1ef1c t\u1ebf, \u0111\u1ebfn c\u00e1c k\u1ef9 thu\u1eadt n\u00e2ng cao v\u00e0 l\u01b0u \u00fd khi \u00e1p d\u1ee5ng v\u00e0o d\u1ef1 \u00e1n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, b\u1ea1n th\u01b0\u1eddng s\u1ebd g\u1eb7p nhu c\u1ea7u hi\u1ec3n th\u1ecb c\u00e1c c\u1eeda s\u1ed5 n\u1ed5i b\u1eadt nh\u01b0 h\u1ed9p tho\u1ea1i th\u00f4ng b\u00e1o, form nh\u1eadp li\u1ec7u ho\u1eb7c h\u00ecnh \u1ea3nh xu\u1ea5t hi\u1ec7n n\u1ed5i l\u00ean tr\u00ean giao di\u1ec7n ch\u00ednh. Modal trong Bootstrap ch\u00ednh l\u00e0 c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi gi\u00fap b\u1ea1n th\u1ef1c hi\u1ec7n vi\u1ec7c [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":89390,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-89213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Kh\u00e1m ph\u00e1 ngay Modal Bootstrap l\u00e0 g\u00ec, v\u00ed d\u1ee5 c\u00e1ch d\u00f9ng Modal chi ti\u1ebft, t\u00f9y ch\u1ec9nh t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, v\u00e0 d\u1ec5 hi\u1ec3u cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao\" \/>\n<meta property=\"og:description\" content=\"Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, b\u1ea1n th\u01b0\u1eddng s\u1ebd g\u1eb7p nhu c\u1ea7u hi\u1ec3n th\u1ecb c\u00e1c c\u1eeda s\u1ed5 n\u1ed5i b\u1eadt nh\u01b0 h\u1ed9p tho\u1ea1i th\u00f4ng b\u00e1o, form nh\u1eadp li\u1ec7u ho\u1eb7c h\u00ecnh \u1ea3nh\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-12T15:59:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-12T16:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/modal-bootstrap-la-gi.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","description":"Kh\u00e1m ph\u00e1 ngay Modal Bootstrap l\u00e0 g\u00ec, v\u00ed d\u1ee5 c\u00e1ch d\u00f9ng Modal chi ti\u1ebft, t\u00f9y ch\u1ec9nh t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, v\u00e0 d\u1ec5 hi\u1ec3u cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","og_description":"Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, b\u1ea1n th\u01b0\u1eddng s\u1ebd g\u1eb7p nhu c\u1ea7u hi\u1ec3n th\u1ecb c\u00e1c c\u1eeda s\u1ed5 n\u1ed5i b\u1eadt nh\u01b0 h\u1ed9p tho\u1ea1i th\u00f4ng b\u00e1o, form nh\u1eadp li\u1ec7u ho\u1eb7c h\u00ecnh \u1ea3nh","og_url":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-12T15:59:55+00:00","article_modified_time":"2025-07-12T16:01:38+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/modal-bootstrap-la-gi.jpg","type":"image\/jpeg"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao","datePublished":"2025-07-12T15:59:55+00:00","dateModified":"2025-07-12T16:01:38+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/"},"wordCount":4207,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/modal-bootstrap-la-gi.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/","url":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/","name":"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/modal-bootstrap-la-gi.jpg","datePublished":"2025-07-12T15:59:55+00:00","dateModified":"2025-07-12T16:01:38+00:00","description":"Kh\u00e1m ph\u00e1 ngay Modal Bootstrap l\u00e0 g\u00ec, v\u00ed d\u1ee5 c\u00e1ch d\u00f9ng Modal chi ti\u1ebft, t\u00f9y ch\u1ec9nh t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, v\u00e0 d\u1ec5 hi\u1ec3u cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/modal-bootstrap-la-gi.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/modal-bootstrap-la-gi.jpg","width":800,"height":421,"caption":"Modal Bootstrap l\u00e0 g\u00ec - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/modal-bootstrap-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Modal Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=89213"}],"version-history":[{"count":4,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89213\/revisions"}],"predecessor-version":[{"id":89392,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/89213\/revisions\/89392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/89390"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=89213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=89213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=89213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}