Khi cần thể hiện một thông điệp nào đó trên website của mình ta thường dùng hàm JavaScript Alert(), đây là một hàm rất thông dụng. Tuy nhiên đối một một nhà thiết kế web thì đôi khi điều này là không đủ, họ muốn cái gì đó sinh động hơn trong thiết kế, hoặc đối với một số trang web tương tác họ cần nhiều hơn thế ví khi một sự kiện click được thực thì nó sẽ hiển thị một mẫu form như mẫu đăng ký, login, hoặc form...
Để thực hiện điều này thì ta sẽ dụng một dạng thiết kế mục tiêu(CSS) trong tiếng anh thường dùng là từ "target modal", với nó ta có thể dễ dàng định nghĩa và thiết kế một mẫu form cách hiện thị theo mục tiêu của mình một cách dễ dàng. Trong bài viết này tôi xin giới thiệ một ví dụ nhỏ để trình bày vè cách thiết kế "target modal" này.
Demo Online: Target Modal:
Example: Souce Code CSS Target Modal
Như bạn thấy trong ví dụ trên trong HTML ta xây dựng một lớp(class) Modal chứa các thành phần(tag html) khác nhau, và trong CSS lớp Modal được xây dựng để trình bày, bố cục, để sao cho lớp Modal này được hiển thị tốt nhất theo mục tiêu thiết kế của chúng ta, và ta có thể dễ dàng thấy các thành phần(CSS) chủ yếu để hình thành nên lớp Modal này bao gồm:
Để thực hiện điều này thì ta sẽ dụng một dạng thiết kế mục tiêu(CSS) trong tiếng anh thường dùng là từ "target modal", với nó ta có thể dễ dàng định nghĩa và thiết kế một mẫu form cách hiện thị theo mục tiêu của mình một cách dễ dàng. Trong bài viết này tôi xin giới thiệ một ví dụ nhỏ để trình bày vè cách thiết kế "target modal" này.
Demo Online: Target Modal:
Example: Souce Code CSS Target Modal
<!DOCTYPE html>
<html>
<head>
<style>
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {top:-100px;opacity: 0;}
to {top:0px;opacity:1;}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {top:-100px;opacity: 0;}
to {top:0px;opacity:1;}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
}
header {
background-color: orange;
font-size: 25px;
color: white;
}
footer {
background-color: orange;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<a href="#id01">Open Modal</a>
<div id="id01" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Modal Header</h2>
</header>
<div class="container">
<p>Some text in the modal.</p>
<p>Some text in the modal.</p>
</div>
<footer class="container">
<p>Modal footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {top:-100px;opacity: 0;}
to {top:0px;opacity:1;}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {top:-100px;opacity: 0;}
to {top:0px;opacity:1;}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
}
header {
background-color: orange;
font-size: 25px;
color: white;
}
footer {
background-color: orange;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<a href="#id01">Open Modal</a>
<div id="id01" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Modal Header</h2>
</header>
<div class="container">
<p>Some text in the modal.</p>
<p>Some text in the modal.</p>
</div>
<footer class="container">
<p>Modal footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Như bạn thấy trong ví dụ trên trong HTML ta xây dựng một lớp(class) Modal chứa các thành phần(tag html) khác nhau, và trong CSS lớp Modal được xây dựng để trình bày, bố cục, để sao cho lớp Modal này được hiển thị tốt nhất theo mục tiêu thiết kế của chúng ta, và ta có thể dễ dàng thấy các thành phần(CSS) chủ yếu để hình thành nên lớp Modal này bao gồm:
- The modal's background.
- Display the modal when targeted.
- The modal box.
- The modal's content.
- The button used to close the modal.
- Other design show modal.
Nguồn: W3School
No comments:
Post a Comment