Tất cả bài viết | Lập trình Jquery
Hướng dẫn tạo cửa sổ Popup đơn giản bằng HTML,CSS,JQUERY
Phần định nghĩa HTML cho liên kết và nội dung cần Popup
Tạo cửa sổ Popup đơn giản bằng JQUERY
Chương trình khuyến mãi đặc biệt các Khóa học thiết kế web online với nhiều quà tặng hấp dẫn tại website //hocwebgiare.com nhân dịp lễ 30/04 & 01/05
Chương trình khuyến mãi đặc biệt lễ 30/04 & 01/05 X
Phần định nghĩa CSS cho cửa sổ Popup & nội dung trong trang web
body { background:#054902; font-size:18px; line-height: 32px; color: #fff; word-wrap:break-word !important; font-family: Arial; } h2 { font-size: 36px; text-align: center; line-height: 1.5; color: #FFF; } h3 { font-size: 20px; text-align: center; color: #FFF; } a { color: #FFF; } p { font-size:22px; line-height:40px; } .dummy-text { width:50%; margin: 100px auto; } .modalwindow { position:fixed; width:440px; height:200px; display:none; z-index:9999; padding:20px; } .modalwindow { min-width: 300px; width: -webkit-min-content; width: -moz-min-content; width: min-content; height:auto; background: #dd3333; font-size: 18px; color: #FFF; } .modalwindow h3 { margin: 0 0 15px 0; padding: 0; border-bottom: 1px solid #000; width: 100%; display: block; } .modalwindow h3 span a { float: right; text-decoration: none; color: #000; }
Phần script JQUERY để mở cửa sổ Popup
$[document].ready[function[] { $['a[name=modal]'].click[function[e] { e.preventDefault[]; var id = $[this].attr['href']; var winH = $[window].height[]; var winW = $[window].width[]; $[id].css['top', winH/2-$[id].height[]/2]; $[id].css['left', winW/2$[id].width[]/2]; $[id].fadeIn[500]; }]; $['.modalwindow .close'].click[function [e] { e.preventDefault[]; $['.modalwindow'].fadeOut[500]; }]; }];
- Tags:
- Popup
- Cửa sổ Popup
- Tạo cửa sổ Popup
- JQUERY
- Bootstrap Modalbox
- Modal Box
Nội dung chính
Đã đăng vào thg 3 22, 2019 8:03 SA 0 phút đọc
Giới thiệu:
Modal Box hay Popup là những thuật ngữ quen thuộc trong Jquery. Nó giúp mở một cửa sổ nhỏ, nổi bật giữa trang web để hiện thông báo hướng dẫn, giới thiệu hay tạo một form lấy thông tin từ người dùng. Những box như vậy tương tác ngay trên trang hiện tại mà không cần mở trang mới, điều này tạo sự thân thiện và thích thú với người xem.
HTML:
Modal Demo
Open Modal
×
Modal Box
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb[0, 0, 0];
background-color: rgba[0, 0, 0, .4];
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JS:
$[document].ready[function [] {
var modal = $['.modal'];
var btn = $['.btn'];
var span = $['.close'];
btn.click[function [] {
modal.show[];
}];
span.click[function [] {
modal.hide[];
}];
$[window].on['click', function [e] {
if [$[e.target].is['.modal']] {
modal.hide[];
}
}];
}];
Demo:
//codepen.io/huongk54a2/pen/EMGxwP
Kết luận:
Hy vọng bài viết này sẽ giúp mọi người tạo ra được 1 Modal Box hay Popup đơn giản gọn nhẹ. Bài viết sau mình sẽ hướng dẫn mọi người tạo Tab bằng Jquery. Cảm ơn mọi người đã theo dõi.
All rights reserved
Tất cả bài viết | Lập trình Jquery
Phần định nghĩa HTML cho liên kết và nội dung cần Popup
Chương trình khuyến mãi đặc biệt các Khóa học thiết kế web online với nhiều quà tặng hấp dẫn tại website //hocwebgiare.com nhân dịp lễ 30/04 & 01/05
Chương trình khuyến mãi đặc biệt lễ 30/04 & 01/05 X
Phần định nghĩa CSS cho cửa sổ Popup & nội dung trong trang web
body { background:#054902; font-size:18px; line-height: 32px; color: #fff; word-wrap:break-word !important; font-family: Arial; } h2 { font-size: 36px; text-align: center; line-height: 1.5; color: #FFF; } h3 { font-size: 20px; text-align: center; color: #FFF; } a { color: #FFF; } p { font-size:22px; line-height:40px; } .dummy-text { width:50%; margin: 100px auto; } .modalwindow { position:fixed; width:440px; height:200px; display:none; z-index:9999; padding:20px; } .modalwindow { min-width: 300px; width: -webkit-min-content; width: -moz-min-content; width: min-content; height:auto; background: #dd3333; font-size: 18px; color: #FFF; } .modalwindow h3 { margin: 0 0 15px 0; padding: 0; border-bottom: 1px solid #000; width: 100%; display: block; } .modalwindow h3 span a { float: right; text-decoration: none; color: #000; }
Phần script JQUERY để mở cửa sổ Popup
$[document].ready[function[] { $['a[name=modal]'].click[function[e] { e.preventDefault[]; var id = $[this].attr['href']; var winH = $[window].height[]; var winW = $[window].width[]; $[id].css['top', winH/2-$[id].height[]/2]; $[id].css['left', winW/2$[id].width[]/2]; $[id].fadeIn[500]; }]; $['.modalwindow .close'].click[function [e] { e.preventDefault[]; $['.modalwindow'].fadeOut[500]; }]; }];
- Tags:
- Popup
- Cửa sổ Popup
- Tạo cửa sổ Popup
- JQUERY
- Bootstrap Modalbox
- Modal Box