Bootstrap modal, Material Design modal,... là một trong những plugin tích hợp hợp hộp thoại Modal phổ biến nhất được sử dụng ngoài ra còn rất nhiều plugin được xây dựng riêng cho dạng này. Nếu bạn không có kết hoạch sử dụng plugin ngoài cho theme blogspot của mình mà tự code có thể tham khảo về cách làm của mình dưới đây
Phương thức hoạt động của modal là khi click vào button, hay liên kết sẽ hiển thị cửa sổ bật lên với nội dung về xác nhận, bài viết, mẫu form tự điền,...và để làm được thứ nhất bạn cần thiết kế giao diện cho modal và thứ hai viết script kích hoạt modal khi click vào button hay liên kết
1. Viết css cho giao diện hộp thoại Modal
Code tham khảo chèn trước thẻ đóng </head>
<b:tag name='style'>/* <![CDATA[ */
/* Button */
.theme-button {
position: relative;
overflow: hidden;
font-family: inherit;
display: inline-block;
min-width: 88px;
height: 34px;
line-height: 34px;
padding: 0 10px;
color: #fff;
-webkit-appearance: none;
font-size: 14px;
letter-spacing: .5px;
font-weight: 400;
border: 0;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
transition: opacity .15s;
}
.theme-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
.theme-button:hover::after {
animation: buttonripple 1s ease-out;
text-decoration: none;
}
.theme-button.blue {
background-color: #1a73e8;
}
.theme-button.green {
background-color: #77cc6d;
}
.theme-button.purple {
background-color: #855085;
}
.theme-button.orange {
background-color: #ff7518;
}
.theme-button.red {
background-color: #d61f11;
}
/* Modal */
.modal--confirm {
background-color: rgba(0, 0, 0, 0.502);
position: fixed;
right: 0;
top: 0;
bottom: 0;
left: 0;
z-index: 5000;
opacity: 0;
transition: opacity .15s cubic-bezier(0.4, 0.0, 0.2, 1) .15s;
}
.modal--target {
display: none;
}
.modal--confirm.show {
transition: opacity .05s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 1;
}
.modal--dialog {
-webkit-box-align: center;
box-align: center;
align-items: center;
display: flex;
-webkit-box-orient: vertical;
box-orient: vertical;
flex-direction: column;
bottom: 0;
left: 0;
padding: 0 5%;
position: absolute;
right: 0;
top: 0;
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
transform-origin: center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.modal--confirm.show .modal--dialog {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.modal--confirm form {
margin: 0;
}
.modal--content {
background-color: #fff;
-webkit-box-align: stretch;
align-items: stretch;
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
transition: transform .225s cubic-bezier(0.0, 0.0, 0.2, 1);
position: relative;
border-radius: 3px;
box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
max-width: 600px;
overflow: hidden;
flex-shrink: 1;
max-height: 100%;
font-family: Roboto, Arial, sans-serif;
font-size: inherit;
color: currentColor;
}
._3em {
display: block;
height: 3em;
flex-grow: 1;
}
._cs {
padding: 10px 0 0 22px;
}
.modal--header {
background-color: #f5f6f7;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
position: relative;
padding: 10px 12px;
border-bottom: 1px solid #e5e5e5;
border-radius: 3px 3px 0 0;
color: currentColor;
font-weight: bolder;
line-height: normal;
}
.modal--header ._mht {
margin-right: auto;
}
.modal--header ._mhc {
margin-left: auto;
}
.modal--icon {
width: 21px;
height: 21px;
line-height: 21px;
}
.modal--content p:not(: last-child) {
margin-bottom: 1rem;
}
.modal--body {
background: #fff;
padding: 12px;
overflow: hidden;
overflow-y: auto;
}
.modal--body>div {
line-height: 1.6rem;
}
.modal--body input[type="radio"] {
margin: 0 5px 0 0;
}
.modal--footer {
background: #fff;
margin: 0 12px;
padding: 12px 0;
border-top: 1px solid #dddfe2;
text-align: right;
}
.modal--footer button {
position: relative;
display: inline-block;
padding: 0 8px;
border: 1px solid;
white-space: nowrap;
height: 26px;
line-height: 26px;
border-radius: 2px;
-webkit-font-smoothing: antialiased;
font: 600 13px Roboto, Arial, sans-serif;
justify-content: center;
text-align: center;
text-shadow: none;
vertical-align: middle;
transition: 200ms cubic-bezier(.08, .52, .52, 1) background-color, 200ms cubic-bezier(.08, .52, .52, 1) box-shadow, 200ms cubic-bezier(.08, .52, .52, 1) transform;
}
.modal--footer button:not(.primary) {
background-color: #f5f6f7;
border-color: #ccd0d5;
color: currentColor;
}
.modal--footer button[type="submit"],.modal--footer button.primary {
background-color: #4267b2;
border-color: #4267b2;
color: #fff;
}
.modal--footer button+button {
margin-left: 5px;
}
.modal--footer button:hover,.modal--footer button:focus {
outline: none;
}
@media(min-width: 551px) {
.modal--content {
min-width: 510px;
}
}
@media(min-width: 801px) {
.modal--header .modal--icon, .modal--footer button {
cursor: pointer;
}
}
@media(max-width: 550px) {
.modal--content {
width: 100%;
}
}
/* ]]> */</b:tag>
2. Viết script bằng jquery kích hoạt hộp thoại Modal
Code tham khảo chèn trước thẻ đóng </body>
<script>//<![CDATA[
$(function() {
var target = '#' + $('.modal--target').attr('id'),
canonical = $('link[rel="canonical"]').attr('href'),
url = window.location.href,
modal_content = '<div class="modal--confirm" id="modal1"><form class="modal--dialog"><div class="_3em"></div><div class="modal--content"><div class="modal--header"><div class="_mht">Tắt thông báo</div><div class="_mhc modal--icon modal--close"><svg height="21px" viewBox="0 0 24 24" width="21px"><path fill="#707070" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg></div></div><div class="modal--body"><div><p>Chọn một trong 2 tùy chọn dưới đây</p></div><div class="_cs"><div class="accept--check"><label for="for_accept"><input id="for_accept" name="accept_calcel" required="" type="radio" value="Có">Có</label></div><div class="calcel--check"><label for="for_calcel"><input id="for_calcel" name="accept_calcel" required="" type="radio" value="Không">Không</label></div></div></div><div class="modal--footer"><button class="modal--close" type="button">Hủy</button><button type="submit">Áp dụng</button></div></div><div class="_3em"></div></form></div>'
$('.modal--icon.modal--close').append('<svg height="21px" viewBox="0 0 24 24" width="21px"><path fill="#707070" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>')
$('body').on('click', '.modal--open', function(e) {
e.preventDefault()
if ($(this).is('a')) {
target = $(this).attr('href')
} else {
target = $(this).attr('data-target')
}
window.history.replaceState({path: canonical}, '', canonical + target)
if (!$(target).hasClass('modal--html')) {
$(modal_content).appendTo('body')
$(target).show()
$(target).fadeIn('slow', function() {
$(this).addClass('show')
})
} else {
$(target).show()
$(target).find('.modal--confirm').fadeIn('slow', function() {
$(this).addClass('show')
})
}
$('.modal--close').click(function() {
window.history.replaceState({path: canonical + target}, '', canonical)
$(this).parents('.modal--confirm').removeClass('show')
if (!$(target).hasClass('modal--html')) {
setTimeout(function() {$(target).remove()}, 200)
}
setTimeout(function() {$(target).removeAttr('style')}, 200)
})
})
$('.modal--target').each(function() {
target = '#' + $(this).attr('id')
if (url.indexOf(target) != -1) {
$(target).show()
$(target).find('.modal--confirm').fadeIn('slow', function() {
$(this).addClass('show')
})
}
})
$('.modal--close').click(function() {
var $this = $(this)
window.history.replaceState({path: url}, '', canonical)
$this.parents('.modal--confirm').removeClass('show')
if (!$(target).hasClass('modal--html')) {
setTimeout(function() {$(target).remove()}, 200)
}
setTimeout(function() {$this.parents('.modal--target').removeAttr('style')}, 200)
})
$(document).on('keyup', function(k) {
if (k.keyCode == 27) {
window.history.replaceState({path: url}, '', canonical)
$(target).find('.modal--confirm').removeClass('show')
if (!$(target).hasClass('modal--html')) {
setTimeout(function() {$(target).remove()}, 200)
}
setTimeout(function() {$(target).removeAttr('style')}, 200)
}
})
})
//]]></script>
3. Chèn code html vào theme hay trang cụ thể
+ Phương thức 1: Chèn liên kết, button gọi hộp thoại modal nhưng không chèn code html của modal
<a class="theme-button green modal--open" role="button" href="#modal1" title="">Modal 1</a>
Hiển thị
+ Phương thức 2: Chèn liên kết, button gọi hộp thoại modal và chèn code html của modal
- Liên kết, button
<button class="theme-button blue modal--open" type="button" data-target="#modal2">Modal 2</button>
Hiển thị
- Hộp thoại modal
<div class="modal--target modal--html" id="modal2">
<div class="modal--confirm">
<div class="modal--dialog">
<div class="_3em"></div>
<div class="modal--content">
<div class="modal--header">
<div class="_mht">Cách tùy biến khung nhận xét iframe mặc định của Blogger</div>
<div class="_mhc modal--icon modal--close"></div>
</div>
<div class="modal--body">
<div>
<p>Sử dụng các biến Variable cài đặt trong b:skin của chủ đề theme cho trích xuất đầu ra màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết</p>
<p>Khung nhận xét iframe mặc định rất khó tùy biến css phải không các bạn? Tuy nhiên nếu bạn chịu khó để ý một chút thì Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết.</p>
<p>
Cho phép ở đây không phải bằng viết css trực tiếp mà sử dụng skin var khai báo biến đầu vào, cụ thể trong thẻ
<b:skin>
, bạn có thể tùy biến skin var và khi tải trang khung nhận xét sẽ căn cứ vào đó để hiển thị. Một điều chắc chắn nếu template nào đang sử dụng iframe nhận xét mặc định, trong
<b:skin>
đều phải có các dòng variable, nếu không khung nhận xét sẽ báo lỗi và không hiển thị được.
</p>
<p>Cho nên, bạn không cần thêm, mà chỉ tùy biến thứ đã có sẵn, vấn đề là cài đặt phần nào mới đúng. Bài viết này mình đưa ra gợi ý để các bạn làm theo, nhớ lưu theme trước khi thực hiện để nếu làm sai thì phục hồi lại.</p>
<p>Như đã đề cập ở phần đầu thì Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết. Cụ thể sẽ có 4 dòng Variable tương tự sau đây sẽ quyết định điều đó, mình lấy ví dụ lưu ý mỗi template đều khai báo biến khác nhau chứ không giống nhau</p>
</div>
</div>
<div class="modal--footer"><button class="modal--close primary" type="button">Đã hiểu</button></div>
</div>
<div class="_3em"></div>
</div>
</div>
</div>
4. Lưu ý về cách chèn liên kết gọi hộp thoại
+ Nếu sử dụng thẻ tag a thi sử dụng thuộc tính href="#id hộp thoại", ví dụ
<a class="theme-button purple modal--open" role="button" href="#quick-buy" title="Mua nhanh">Mua nhanh</a>
+ Nếu không sử dụng thẻ tag a thì sử dụng thuộc tính data-target="#id hộp thoại" cho bất kỳ thẻ tag nào khác a, ví dụ:
<div class="theme-button orange modal--open" role="button" data-target="#modal3">Modal 3</div>
5. Lưu ý về cách chèn hộp thoại modal
Nếu bạn đã chèn liên kết gọi hộp thoại modal, bạn có 2 phương thức
+ Phương thức 1: Tạo modal bằng script, như ví dụ trong code script ở trên có đoạn
modal_content = '<div class="modal--confirm" id="modal1"><form class="modal--dialog"><div class="_3em"></div><div class="modal--content"><div class="modal--header"><div class="_mht">Tắt thông báo</div><div class="_mhc modal--icon modal--close"><svg height="21px" viewBox="0 0 24 24" width="21px"><path fill="#707070" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg></div></div><div class="modal--body"><div><p>Chọn một trong 2 tùy chọn dưới đây</p></div><div class="_cs"><div class="accept--check"><label for="for_accept"><input id="for_accept" name="accept_calcel" required="" type="radio" value="Có">Có</label></div><div class="calcel--check"><label for="for_calcel"><input id="for_calcel" name="accept_calcel" required="" type="radio" value="Không">Không</label></div></div></div><div class="modal--footer"><button class="modal--close" type="button">Hủy</button><button type="submit">Áp dụng</button></div></div><div class="_3em"></div></form></div>'
Đoạn này sử dụng cho liên kết như ví dụ ở trên
<a class="theme-button green modal--open" role="button" href="#modal1" title="">Modal 1</a>
+ Phương thức 2: Chèn code html cho hộp thoại modal
<div class="modal--target modal--html" id="modal3">
<div class="modal--confirm">
<form class="modal--dialog bg_se" action="https://www.thietkeblogspot.com/search" method="get" role="search">
<div class="_3em"></div>
<div class="modal--content">
<div class="modal--header">
<div class="_mht">Tìm kiếm bài viết</div>
<div class="_mhc modal--icon modal--close"></div>
</div>
<div class="modal--body">
<div class="bg_wr bg_fl bg_lh">
<button class="bg_su" type="submit">
<svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>
</button>
<input autocomplete="off" class="bg_in bg_lh bg_fo" name="q" placeholder="Tìm kiếm" required="" spellcheck="false" type="text" value="">
<input name="max-results" type="hidden" value="12"/>
</div>
</div>
<div class="modal--footer">
<button class="modal--close" type="button">Hủy</button>
<button class="primary" type="submit">Tìm kiếm</button>
</div>
</div>
<div class="_3em"></div>
</div>
</form>
</div>
Tạo liên kết gọi hộp thoại
<div class="theme-button orange modal--open" role="button" data-target="#modal3">Modal 3</div>
Hiển thị
Cách tùy biến khung nhận xét iframe mặc định của Blogger
Sử dụng các biến Variable cài đặt trong b:skin của chủ đề theme cho trích xuất đầu ra màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết
Khung nhận xét iframe mặc định rất khó tùy biến css phải không các bạn? Tuy nhiên nếu bạn chịu khó để ý một chút thì Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết.
Cho phép ở đây không phải bằng viết css trực tiếp mà sử dụng skin var khai báo biến đầu vào, cụ thể trong thẻ
Cho nên, bạn không cần thêm, mà chỉ tùy biến thứ đã có sẵn, vấn đề là cài đặt phần nào mới đúng. Bài viết này mình đưa ra gợi ý để các bạn làm theo, nhớ lưu theme trước khi thực hiện để nếu làm sai thì phục hồi lại.
Như đã đề cập ở phần đầu thì Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết. Cụ thể sẽ có 4 dòng Variable tương tự sau đây sẽ quyết định điều đó, mình lấy ví dụ lưu ý mỗi template đều khai báo biến khác nhau chứ không giống nhau
