Centered Bootstrap Modal Dialog

Đang làm về cái này nên cũng muốn note lại để mọi người tham khảo, cũng ko phải code mình viết mà là tìm được ở trên anh GG :D.
Đoạn code này giúp cho modal dialog trong bootstrap được căn ra giữa màn hình thay vì hiện ở top.

.modal {
text-align: center;
}

.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

Có một điều cũng phát hiện ra là nếu dùng cái này với các thiết bị màn hình lớn thì không sao, nhưng dùng với mobile thì không ổn vì modal lúc này đã bị căn ra giữa, nên trên mobile phải kéo tít xuống dưới mới thấy được. Có thể các bạn chưa rõ ý mình nói cái này lắm nên có thể kéo nhỏ màn hình lại sẽ thấy ngay.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

Nguyen Trong Tuan

4 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
2 0
Mình xin được giới thiệu về 4 cách sử dụng layout trong SailsJS mà mình biết: Cách 1: Đây là cách mặc định của SailsJS, layout dùng cho project s...
Nguyen Trong Tuan viết 3 năm trước
2 0
Male avatar
1 4
Để lấy giá trị của các biến được truyền trên url dùng jQuery, ta sử dụng hàm sau: function GetURLParameter(sParam) { var sPageURL = window.loca...
Nguyen Trong Tuan viết 3 năm trước
1 4
Male avatar
1 0
Trong khai báo model của SailsJS, nếu chúng ta không khai báo schema thì khi dùng hàm ModelName].create(req.params.all(),...); toàn bộ các tham số ...
Nguyen Trong Tuan viết 3 năm trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!