Hướng dẫn php show popup
Tất cả bài viết | Lập trình JqueryHướng dẫn tạo cửa sổ Popup đơn giản bằng HTML,CSS,JQUERYPhần định nghĩa HTML cho liên kết và nội dung cần Popup Show
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);
});
});
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: CSS: JS: Demo: https://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 JqueryPhần định nghĩa HTML cho liên kết và nội dung cần Popup
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);
});
});
|
