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 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 http://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;  
}

h1 {  
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);
    });
});

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất