Hướng dẫn popup trong html

Bạn đang muốn tạo ra một Modal Popup? Bạn chưa biết bắt đầu từ đâu? bài viết này tôi chia sẻ đến bạn cách thực tạo ra một modal nhanh, gọn, nhẹ.

Modal Popup là gì?

Modal là một Dialog [hộp thoại] hoặc là một Popup [cửa sổ bật lên], nó hiển thị đè lên trên tất cả các nội dung khác của trang hiện tại.

Lợi ích của Modal là hiển thị một thông báo, một tác vụ mà người dùng cần làm trong quá trình tương tác với website.

Ví dụ như hiển thị form đăng nhập, thông tin sản phẩm vừa thêm vào giỏ hàng, form thu thập thông tin khách hàng.

Để tạo ra Modal cần có kiến thức Html Css, Js cơ bản kết hợp với tư duy thuật toán để xứ lý các sự kiện trên Modal.

Video hướng dẫn tạo Modal Popup website

Bạn yên tâm, video này tôi chia sẻ bạn từng bước cách tạo modal, tôi tin rằng nó sẽ giúp bạn hiểu nguyện lý và tự tay code lên được modal cho riêng mình.

Tạm kết:

Video này hữu ích với bạn chứ? Nếu bạn xem video và cảm thấy quá nhiều chổ mình vẫn chưa nắm rõ thì tôi nghĩ rằng bạn đang chưa có nền tảng.

Nếu bạn muốn học đi làm nhưng đang mất định hướng thì hãy khảm khảo Html Css 21 Ngày, đây là chương trình giúp bạn thành thạo cách xây dựng giao diện website từ cơ bản đến nâng cao. Đi sâu vao cắt Html Css từ bản thiết kế.

Popup [bật lên] là một trong những chức năng thường thấy ở hầu hết các website. Chẳng hạn như các trang web dịch vụ, bán hàng bạn sẽ thấy các Popup hiển thị Form liên hệ, đăng ký, đăng nhập vv… Thật may mắn khi các trình duyệt đều hỗ trợ ngôn ngữ JavaScript. Bài viết này bạn sẽ được hướng dẫn cách tạo một Popup bằng JavaScript khi click với code đơn giản.

Để thực hành code bạn có thể sử dụng

//www.w3schools.com/html/tryit.asp?filename=tryhtml_default

//codepen.io/pen/

Bước 1: Tạo một button liên hệ

 Liên hệ 


×
Bạn cần tư vấn hãy liên hệ với chúng tôi

Bước 2: Viết CSS

.popup {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb[0, 0, 0];
background-color: rgba[0, 0, 0, 0.5];
}
.popup-content {
position: relative;
background-color: #FAFAFA;
padding: 15px;
margin: auto;
width: 70%;
}
.close-btn {
float: right;
color: #2E2E2E;
font-size: 25px;
font-weight: 700;
}
.close-btn:hover {
color: #D2D2D2;
}

Giải thích:

Trước tiên cần phải ẩn nội dung bằng display: none

Bước 3: Thêm JavaScript để lắng nghe sự kiện click chuột

let modalBtn = document.getElementById["popup-btn"];
let modal = document.querySelector[".popup"];
let closeBtn = document.querySelector[".close-btn"];
// Hiển thị popup khi nhấp chuột vào button
modalBtn. title = function[]{
modal.style.display = "block"
}
// Đóng popup khi ấn vào nút đóng
closeBtn. title = function[]{
modal.style.display = "none"
}
// Đóng khi nhấp chuột vào bất cứ khu vực nào trên màn hình
window. title = function[e]{
if[e.target == modal]{
modal.style.display = "none"
}
}

Giải thích:

document.getElementById[“popup-btn”]: Dùng để lấy thông tin từ ID popup-btn
document.querySelector[“.popup”]: Phương thức này để trả về thành phần đầu tiên
Tiếp theo chúng ta sẽ viết ra 3 function là modalBtn. title, closeBtn. title và window. title

Tạo Popup để bật lên một cửa sổ khá đơn giản phải không nào. JavaScript có ứng dụng khá rộng rãi khi dùng để tương tác với người dùng trên trình duyệt. Chắc chắn bạn sẽ làm được rất nhiều thứ khi làm chủ nó.

Untitled Document

* {

margin: 0;

padding:0;

border:0;

font-size:100%;

font: inherit;

vertical-align:baseline;

}

/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

display:block;

}

body {

line-height: 1;

}

ol,

ul {

list-style:none;

}

blockquote,

q {

quotes:none;

}

blockquote:before,

blockquote:after,

q:before,

q:after {

content:"";

content:none;

}

table {

border-collapse:collapse;

border-spacing:0;

}

/* --------------------------------

Primary style

-------------------------------- */

html * {

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing: grayscale;

}

*:after,

*:before {

-webkit-box-sizing:border-box;

-moz-box-sizing: border-box;

box-sizing:border-box;

}

body {

font-size:100%;

font-family:"PT Sans",sans-serif;

color:#505260;

background-color: #454751;

}

a {

color:#2f889a;

text-decoration:none;

}

img {

max-width:100%;

}

input,

textarea {

font-family:"PT Sans",sans-serif;

font-size:16px;

font-size: 1rem;

}

input::-ms-clear,

textarea::-ms-clear {

display:none;

}

/* --------------------------------

xcody-info

-------------------------------- */

#cody-info {

position:relative;

background:#fff;

height:44px;

box-shadow:01px1px rgba[0,0,0,0.1];

}

#cody-info .cody-info-logo {

position:absolute;

left:50%;

top:50%;

margin-left:-15px;

margin-top: -13px;

}

#cody-info .cody-info-logo svg {

display:block;

-webkit-transition: opacity,0.2s;

-moz-transition:opacity,0.2s;

transition:opacity,0.2s;

}

#cody-info .cody-info-logo svg:hover {

opacity:0.9;

}

#cody-info .cody-info-logo .cody-info-logo-svg {

fill: #343642;

}

#cody-info li {

position:absolute;

top:0;

}

#cody-info li:first-child {

left:0;

}

#cody-info li:last-child {

right:0;

}

#cody-info li a {

display:block;

width: 44px;

height:44px;

position:relative;

-webkit-transition:background 0.2s;

-moz-transition:background0.2s;

transition:background0.2s;

}

#cody-info li a:hover {

background-color:#29889b;

}

#cody-info li a:hover .cody-info-buttons-svg {

fill: #fff;

}

#cody-info li svg {

display:block;

position:absolute;

top:50%;

left:50%;

margin-top:-16px;

margin-left: -16px;

}

#cody-info li .cody-info-buttons-svg {

fill:#29889b;

}

#cody-info.cody-info-bottom {

width:100%;

position:fixed;

bottom:0;

left: 0;

z-index:1;

box-shadow:0-1px1pxrgba[0,0,0, 0.1];

}

#cody-info::after {

content:"";

display: table;

clear:both;

}

@media only screen and [min-width: 600px] {

#cody-info {

height:60px;

}

#cody-info li a {

height:60px;

width:60px;

}

/* --------------------------------

Main components

-------------------------------- */

header[role="banner"] {

position:relative;

height: 50px;

background:#343642;

}

header[role="banner"] #cd-logo {

float: left;

margin:4px005%;

/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */

-webkit-transform-origin: 050%;

-moz-transform-origin:050%;

-ms-transform-origin:050%;

-o-transform-origin: 050%;

transform-origin:050%;

-webkit-transform:scale[0.8];

-moz-transform: scale[0.8];

-ms-transform:scale[0.8];

-o-transform:scale[0.8];

transform: scale[0.8];

}

header[role="banner"] #cd-logo img {

display:block;

}

header[role="banner"]::after {

/* clearfix */

content:"";

display:table;

clear: both;

}

@media only screen and [min-width: 768px] {

header[role="banner"] {

height:80px;

}

header[role="banner"] #cd-logo {

margin:20px005%;

-webkit-transform:scale[1];

-moz-transform: scale[1];

-ms-transform:scale[1];

-o-transform:scale[1];

transform:scale[1];

}

.main-nav {

float: right;

margin-right:5%;

width:44px;

height:100%;

background: url["../img/cd-icon-menu.svg"]no-repeatcentercenter;

cursor:pointer;

}

.main-nav ul {

position:absolute;

top:0;

left:0;

width: 100%;

-webkit-transform:translateY[-100%];

-moz-transform:translateY[-100%];

-ms-transform: translateY[-100%];

-o-transform:translateY[-100%];

transform:translateY[-100%];

}

.main-nav ul.is-visible {

-webkit-transform:translateY[50px];

-moz-transform: translateY[50px];

-ms-transform:translateY[50px];

-o-transform:translateY[50px];

transform:translateY[50px];

}

.main-nav a {

display:block;

height:50px;

line-height:50px;

padding-left:5%;

background: #292a34;

border-top:1pxsolid#3b3d4b;

color:#fff;

}

@media only screen and [min-width: 768px] {

.main-nav {

width:auto;

height:auto;

background: none;

cursor:auto;

}

.main-nav ul {

position: static;

width:auto;

-webkit-transform:translateY[0];

-moz-transform: translateY[0];

-ms-transform:translateY[0];

-o-transform: translateY[0];

transform:translateY[0];

line-height:80px;

}

.main-nav ul.is-visible {

-webkit-transform:translateY[0];

-moz-transform: translateY[0];

-ms-transform:translateY[0];

-o-transform: translateY[0];

transform:translateY[0];

}

.main-nav li {

display: inline-block;

margin-left:1em;

}

.main-nav li:nth-last-child[2] {

margin-left: 2em;

}

.main-nav a {

display:inline-block;

height: auto;

line-height:normal;

background:transparent;

}

.main-nav a.cd-signin,

.main-nav a.cd-signup {

padding:0.6em1em;

border:1pxsolid rgba[255,255,255,0.6];

border-radius:50em;

}

.main-nav a.cd-signup {

background:#2f889a;

border:none;

}

/* --------------------------------

xsigin/signup popup

-------------------------------- */

.cd-user-modal {

position: fixed;

top:0;

left:0;

width:100%;

height: 100%;

background:rgba[52,54,66,0.9];

z-index:3;

overflow-y: auto;

cursor:pointer;

visibility:hidden;

opacity:0;

-webkit-transition: opacity0.3s0,visibility00.3s;

-moz-transition:opacity0.3s0,visibility00.3s;

transition:opacity0.3s0,visibility00.3s;

}

.cd-user-modal.is-visible {

visibility: visible;

opacity:1;

-webkit-transition:opacity0.3s0,visibility00;

-moz-transition: opacity0.3s0,visibility00;

transition:opacity0.3s0,visibility00;

}

.cd-user-modal.is-visible .cd-user-modal-container {

-webkit-transform:translateY[0];

-moz-transform: translateY[0];

-ms-transform:translateY[0];

-o-transform:translateY[0];

transform: translateY[0];

}

.cd-user-modal-container {

position:relative;

width: 90%;

max-width:600px;

background:#fff;

margin:3em auto4em;

cursor:auto;

border-radius:0.25em;

-webkit-transform: translateY[-30px];

-moz-transform:translateY[-30px];

-ms-transform:translateY[-30px];

-o-transform:translateY[-30px];

transform:translateY[-30px];

-webkit-transition-property: -webkit-transform;

-moz-transition-property:-moz-transform;

transition-property:transform;

-webkit-transition-duration: 0.3s;

-moz-transition-duration:0.3s;

transition-duration:0.3s;

}

.cd-user-modal-container .cd-switcher:after {

content:"";

display:table;

clear:both;

}

.cd-user-modal-container .cd-switcher li {

width:50%;

float:left;

text-align: center;

}

.cd-user-modal-container .cd-switcher li:first-child a {

border-radius:0.25em000;

}

.cd-user-modal-container .cd-switcher li:last-child a {

border-radius:00.25em00;

}

.cd-user-modal-container .cd-switcher a {

display:block;

width:100%;

height:50px;

line-height: 50px;

background:#d2d8d8;

color:#809191;

}

.cd-user-modal-container .cd-switcher a.selected {

background:#fff;

color:#505260;

}

@media only screen and [min-width: 600px] {

.cd-user-modal-container {

margin:4emauto;

}

.cd-user-modal-container .cd-switcher a {

height:70px;

line-height:70px;

}

.cd-form {

padding:1.4em;

}

.cd-form .fieldset {

position: relative;

margin:1.4em0;

}

.cd-form .fieldset:first-child {

margin-top: 0;

}

.cd-form .fieldset:last-child {

margin-bottom:0;

}

.cd-form label {

font-size:14px;

font-size:0.875rem;

}

.cd-form label.image-replace {

/* replace text with an icon */

display:inline-block;

position:absolute;

left: 15px;

top:50%;

bottom:auto;

-webkit-transform: translateY[-50%];

-moz-transform:translateY[-50%];

-ms-transform:translateY[-50%];

-o-transform:translateY[-50%];

transform:translateY[-50%];

height: 20px;

width:20px;

overflow:hidden;

text-indent:100%;

white-space: nowrap;

color:transparent;

text-shadow:none;

background-repeat:no-repeat;

background-position:50%0;

}

.cd-form label.cd-username {

background-image: url["../img/cd-icon-username.svg"];

}

.cd-form label.cd-email {

background-image:url["../img/cd-icon-email.svg"];

}

.cd-form label.cd-password {

background-image:url["../img/cd-icon-password.svg"];

}

.cd-form input {

margin:0;

padding:0;

border-radius:0.25em;

}

.cd-form input.full-width {

width:100%;

}

.cd-form input.has-padding {

padding: 12px20px12px50px;

}

.cd-form input.has-border {

border:1pxsolid #d2d8d8;

-webkit-appearance:none;

-moz-appearance:none;

-ms-appearance:none;

-o-appearance:none;

appearance:none;

}

.cd-form input.has-border:focus {

border-color: #343642;

box-shadow:005pxrgba[52,54,66,0.1];

outline: none;

}

.cd-form input.has-error {

border:1pxsolid#d76666;

}

.cd-form input[type="password"] {

/* space left for the HIDE button */

padding-right:65px;

}

.cd-form input[type="submit"] {

padding:16px0;

cursor:pointer;

background: #2f889a;

color:#fff;

font-weight:bold;

border:none;

-webkit-appearance: none;

-moz-appearance:none;

-ms-appearance:none;

-o-appearance:none;

appearance:none;

}

.no-touch .cd-form input[type="submit"]:hover,

.no-touch .cd-form input[type="submit"]:focus {

background: #3599ae;

outline:none;

}

.cd-form .hide-password {

display: inline-block;

position:absolute;

right:0;

top:0;

padding: 6px15px;

border-left:1pxsolid#d2d8d8;

top:50%;

bottom: auto;

-webkit-transform:translateY[-50%];

-moz-transform:translateY[-50%];

-ms-transform: translateY[-50%];

-o-transform:translateY[-50%];

transform:translateY[-50%];

font-size: 14px;

font-size:0.875rem;

color:#343642;

}

.cd-form .cd-error-message {

display:inline-block;

position:absolute;

left:-5px;

bottom: -35px;

background:rgba[215,102,102,0.9];

padding:0.8em;

z-index: 2;

color:#fff;

font-size:13px;

font-size:0.8125rem;

border-radius: 0.25em;

/* prevent click and touch events */

pointer-events:none;

visibility:hidden;

opacity: 0;

-webkit-transition:opacity0.2s0,visibility00.2s;

-moz-transition:opacity 0.2s0,visibility00.2s;

transition:opacity0.2s0,visibility00.2s;

}

.cd-form .cd-error-message::after {

/* triangle */

content:"";

position:absolute;

left:22px;

bottom:100%;

height:0;

width: 0;

border-left:8pxsolidtransparent;

border-right:8pxsolidtransparent;

border-bottom: 8pxsolidrgba[215,102,102,0.9];

}

.cd-form .cd-error-message.is-visible {

opacity: 1;

visibility:visible;

-webkit-transition:opacity0.2s0,visibility00;

-moz-transition:opacity0.2s0,visibility00;

transition:opacity0.2s 0,visibility00;

}

@media only screen and [min-width: 600px] {

.cd-form {

padding:2em;

}

.cd-form .fieldset {

margin:2em0;

}

.cd-form .fieldset:first-child {

margin-top: 0;

}

.cd-form .fieldset:last-child {

margin-bottom:0;

}

.cd-form input.has-padding {

padding:16px20px16px50px;

}

.cd-form input[type="submit"] {

padding:16px0;

}

.cd-form-message {

padding: 1.4em1.4em0;

font-size:14px;

font-size:0.875rem;

line-height: 1.4;

text-align:center;

}

@media only screen and [min-width: 600px] {

.cd-form-message {

padding:2em2em0;

}

.cd-form-bottom-message {

position:absolute;

width:100%;

left: 0;

bottom:-30px;

text-align:center;

font-size:14px;

font-size: 0.875rem;

}

.cd-form-bottom-message a {

color:#fff;

text-decoration: underline;

}

.cd-close-form {

/* form X button on top right */

display:block;

position: absolute;

width:40px;

height:40px;

right:0;

top: -40px;

background:url["../img/cd-icon-close.svg"]no-repeatcentercenter;

text-indent:100%;

white-space:nowrap;

overflow:hidden;

}

@media only screen and [min-width: 1170px] {

.cd-close-form {

display:none;

}

#cd-login,

#cd-signup,

#cd-reset-password {

display:none;

}

#cd-login.is-selected,

#cd-signup.is-selected,

#cd-reset-password.is-selected {

display:block;

}

jQuery[document].ready[function[$]{

var$form_modal= $['.cd-user-modal'],

$form_login=$form_modal.find['#cd-login'],

$form_signup =$form_modal.find['#cd-signup'],

$form_forgot_password=$form_modal.find['#cd-reset-password'],

$form_modal_tab =$['.cd-switcher'],

$tab_login= $form_modal_tab.children['li'].eq[0].children['a'],

$tab_signup= $form_modal_tab.children['li'].eq[1].children['a'],

$forgot_password_link= $form_login.find['.cd-form-bottom-message a'],

$back_to_login_link=$form_forgot_password.find['.cd-form-bottom-message a'],

$main_nav =$['.main-nav'];

//open modal

$main_nav.on['click',function[event]{

if[ $[event.target].is[$main_nav]]{

// on mobile open the submenu

$[this].children['ul'].toggleClass['is-visible'];

}

else{

// on mobile close submenu

$main_nav.children['ul'].removeClass['is-visible'];

//show modal layer

$form_modal.addClass['is-visible'];

//show the selected form

[ $[event.target].is['.cd-signup']]?signup_selected[]:login_selected[];

}

];

//close modal

$['.cd-user-modal'].on['click', function[event]{

if[$[event.target].is[$form_modal]|| $[event.target].is['.cd-close-form']]{

$form_modal.removeClass['is-visible'];

}

];

//close modal when clicking the esc keyboard button

$[document].keyup[function[event]{

if[event.which=='27']{

$form_modal.removeClass['is-visible'];

}

];

//switch from a tab to another

$form_modal_tab.on['click', function[event]{

event.preventDefault[];

[ $[event.target].is[$tab_login]]?login_selected[]:signup_selected[];

}

];

//hide or show password

$['.hide-password'].on['click', function[]{

var$this=$[this],

$password_field= $this.prev['input'];

['password'==$password_field.attr['type']]? $password_field.attr['type','text']:$password_field.attr['type','password'];

[ 'Hide'==$this.text[]]?$this.text['Show']:$this.text['Hide'];

//focus and move cursor to the end of input field

$password_field.putCursorAtEnd[];

}

];

//show forgot-password form

$forgot_password_link.on['click',function[event]{

event.preventDefault[];

forgot_password_selected[];

}

];

//back to login from the forgot-password form

$back_to_login_link.on['click',function[event]{

event.preventDefault[];

login_selected[];

}

];

function login_selected[]{

$form_login.addClass['is-selected'];

$form_signup.removeClass['is-selected'];

$form_forgot_password.removeClass['is-selected'];

$tab_login.addClass['selected'];

$tab_signup.removeClass['selected'];

}

functionsignup_selected[]{

$form_login.removeClass['is-selected'];

$form_signup.addClass['is-selected'];

$form_forgot_password.removeClass['is-selected'];

$tab_login.removeClass['selected'];

$tab_signup.addClass['selected'];

}

functionforgot_password_selected[]{

$form_login.removeClass['is-selected'];

$form_signup.removeClass['is-selected'];

$form_forgot_password.addClass['is-selected'];

}

//Kiểm tra form hợp lệ

$form_login.find['input[type="submit"]'].on['click', function[event]{

event.preventDefault[];

if [$['#signin-email'].val[]=='']{

$form_login.find['input[type="email"]'].toggleClass['has-error'].next['span'].toggleClass['is-visible'];

}

];

//IE9 placeholder fallback

//credits //www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

if[!Modernizr.input.placeholder]{

$['[placeholder]'].focus[function[]{

varinput= $[this];

if[input.val[]==input.attr['placeholder']]{

input.val[''];

}

].blur[function[] {

varinput=$[this];

if[input.val[]== ''||input.val[]==input.attr['placeholder']]{

input.val[input.attr['placeholder']];

}

].blur[];

$['[placeholder]'].parents['form'].submit[function[]{

$[this].find['[placeholder]'].each[function[] {

varinput=$[this];

if[input.val[] ==input.attr['placeholder']]{

input.val[''];

}

]

}

];

}

];

//credits //css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

jQuery.fn.putCursorAtEnd =function[]{

returnthis.each[function[]{

// If this function exists...

if [this.setSelectionRange]{

// ... then use it [Doesn't work in IE]

// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.

var len=$[this].val[].length*2;

this.setSelectionRange[len, len];

}

else{

// ... otherwise replace the contents with itself

// [Doesn't work in Google Chrome]

$[this].val[$[this].val[]];

}

];

};

jQuery['#cody-info ul li'].eq[1].on['click',function[]{

$['#cody-info'].hide[];

}

];

Đăng nhập

Đăngký

Đăng nhập

Tạo tàikhoản

Email khôngđượcbỏtrống!

Password

Hide

Password khôngđượcbỏtrống!

Nhớđăng nhập

Quênmậtkhẩu?

Username

Username khôngđược bỏtrống!

Email khôngđượcbỏtrống!

Password

Hide

Password khôngđượcbỏtrống!

Tôiđồngývới

Điềukhoản& Chínhsách

Bạnquênmậtkhẩu?Vuilòng nhậpemailcủabạnvà chúngtôisẽgửichobạnmộtemailcóđườngdẫnđểthayđổi mậtkhẩu.

Email khôngđượcbỏtrống!

Quaylạiđăng nhập

Modal Popup là gì?

Video hướng dẫn tạo Modal Popup website

Tạm kết:

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề