Mở Bootstrap 4 Modal Qua Javascript Bằng Cách Nhấp Vào Liên Kết

Bài viết lúc này chúng ta đang đi vào tìm hiểu cách chế tạo một modal cơ phiên bản và các ví dụ thực tế để giúp chúng ta cũng có thể dễ dàng tự gây ra một modal đẹp mắt dành đến website của chính bản thân mình bằng HTML, CSS cùng Javascript nhé.

Bạn đang xem: Mở bootstrap 4 modal qua javascript bằng cách nhấp vào liên kết

Trong phần này bọn họ sẽ đi vào tìm hiểu cách sản xuất modal CSS Javascript cơ phiên bản và điều khiển nó để có thể hiển thị được trên nhiều màn hình hiển thị thiết bị không giống nhau thông qua đoạn mã dưới nhé:

HTML

VíDụModal

MởModal
importurl("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");bodyfont-family:"NotoSansJP",sans-serif;/*ThiếtLậpModalBackground*/ .modal display:none;/*ẨnMặcĐịnh*/ position:fixed; z-index:1; padding-top:100px;/*Vịtrícủamodal*/ left:0; top:0; width:100%; height:100%; overflow:auto;/*thiếtlậpscrollkhicầnthiết*/ background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); #myBtn background-color:#4CAF50; border:none; color:white; padding:15px32px; text-align:center; text-decoration:none; display:inline-block; font-size:16px; margin:4px2px; cursor:pointer; -webkit-transition-duration:0.4s;/*Safari*/ transition-duration:0.4s; box-shadow:01px1pxrgba(0,0,0,0.12), 02px2pxrgba(0,0,0,0.12), 04px4pxrgba(0,0,0,0.12), 08px8pxrgba(0,0,0,0.12), 016px16pxrgba(0,0,0,0.12); outline:none; /*NộiDungModal*/ .modal-content background-color:#fefefe; margin:auto; padding:20px; border:1pxsolid#888; width:80%; box-shadow:01px1pxrgba(0,0,0,0.12), 02px2pxrgba(0,0,0,0.12), 04px4pxrgba(0,0,0,0.12), 08px8pxrgba(0,0,0,0.12), 016px16pxrgba(0,0,0,0.12); border-radius:25px; /*NútĐóngModal*/ .close color:#aaaaaa; float:right; font-size:28px; font-weight:bold; .close:hover, .close:focus color:#000; text-decoration:none; cursor:pointer;

Javascript

/*lấyphầntửmodal*/ varmodal=document.getElementById("myModal");/*thiếtlậpnútmởmodal*/ varbtn=document.getElementById("myBtn");/*thiếtlậpnútđóngmodal*/ varspan=document.getElementsByClassName("close")<0>;/*Sẽhiểnthịmodalkhingườidùngclickvào*/ btn.onclick=function() modal.style.display="block"; /*Sẽđóngmodalkhinhấndấux*/ span.onclick=function() modal.style.display="none"; /*Sẽđóngmodalkhinhấprangoàimànhình*/ window.onclick=function(event) if(event.target==modal) modal.style.display="none"; Và hiệu quả bạn coi hình ảnh dưới phía trên nhé:

Còn dưới đây là công dụng trên codepen nhé!

See the Pen Tao Modal CSS Javascript by haycuoilennao19 (
haycuoilennao19) on CodePen.

Nguồn

Trước khi bước vào ví dụ thì mình tất cả một số để ý sau là giúp thấy rõ công dụng hơn các bạn chuyển sang cơ chế screen 0.5x, 0.25x hay ví như nó ko hiển thị thì bạn nhớ xác minh mình là bé người vào Codepen new xem được nhé. Nếu file là SCSS thì chúng ta cũng có thể chuyển quý phái CSS ở chỗ này nhé : SCSS to CSS. Nếu họ muốn xem những nguồn được sử dụng trong Codepen để bạn thiết lập cấu hình ở dưới máy tính xách tay thì nhấp vào chữ Resources ở bên dưới cùng phía trái của Codepen nhằm xem các đường dẫn CDN nha.

Kết quả bạn xem bên dưới nhé!

See the Pen Pure css popup box by Prakash (

Xem thêm: Mẹ Siêu Âm Thai Mấy Tháng Thì Biết Trai Hay Gái Chưa? 3 Cách Nhận Biết Giới Tính Thai Nhi Sớm Ở Tuần 12

Kết quả chúng ta xem dưới nhé!

See the Pen Modal Animations by Jesse Couch (

Kết quả các bạn xem bên dưới nhé!

See the Pen BootStrap Modal as Left/Right Sidebar by Shahen Algoo (

Kết quả bạn xem dưới nhé!

See the Pen Bootstrap Modal & popover with Velocity.js animation by Mike Sozanski (

Kết quả bạn xem bên dưới nhé!

See the Pen Play YouTube or Vimeo đoạn phim in Modal - Bootstrap 4 by Jacob Lett (

Kết quả các bạn xem bên dưới nhé!