Ads 720 x 90

Tự tạo hộp thoại modal không sử dụng plugin ngoài

Tự thiết kế hộp thoại modal với cửa sổ bật lên cho trang web bằng css à jquery mà không sử dụng mã nguồn ngoài

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 ModalCode
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>



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>

Modal 1







source http://www.hungcoder.com/2020/01/tu-tao-hop-thoai-modal-khong-su-dung.html

Related Posts

Post a Comment

Subscribe Our Newsletter