Video học lập trình mỗi ngày

Hiện nay trong hầu hết các trang web hiện tại đều có sử dụng popup. Do sự tiện lợi của popup nên các developer js đều sử dụng các thư viện như bootstrap. Nhưng do có nhiều dự án bắt buộc không sử dụng một thư viện thứ ba cho nên nhiều devjs đã tạo nên những  dòng code thuần nhưng vẫn toạ ra các giá trị đặc biệt. Và đây là một minh chứng.

Một ví dụ về tạo popup sử dụng javascript. Bạn có thể xem link demo dưới bài viết.

LINK DEMO: SEE HERE 

1 - html

<!-- Overlay -->
	
<div class="overlay" id="overlay" style="display:none;"></div>
	
<!-- Popup -->
	
<div class="popup" id="popup" style="display:none;">
	
<div class="popup-inner">
	
<input type="button" name="Close" class="s3-btn-close" onclick="popupClose();" value="×">
	
<h2>This is popup</h2>
	
<p>Hey I am a popup overlay working with JavaScript</p>
	
</div>
	
</div>
	
<!-- Popup Button -->
	
<input type="button" class="s3-btn" name="Open" onclick="popupOpen();" value="Click to Show Popup">

2 -  css 

<style type="text/css">
	
body {
	
margin: 0;
	
padding: 0;
	
font-family: 'Roboto Condensed', sans-serif;
	
}
	
/* Overlay Styles */
	
.overlay {
	
background: rgba(0, 0, 0, 0.8);
	
opacity: 0.8;
	
filter: alpha(opacity=80);
	
position: absolute;
	
top: 0px;
	
bottom: 0px;
	
left: 0px;
	
right: 0px;
	
z-index: 100;
	
}
	
/* Popup */
	
.popup {
	
background: white;
	
position: absolute;
	
top: 0;
	
left: 0;
	
bottom: 0;
	
right: 0;
	
z-index: 101;
	
width: 500px;
	
/*Change your width here*/
	
height: 200px;
	
/*Change your height here*/
	
margin: auto;
	
/* Popup Inner */
	
}
	
@media (max-width: 768px) {
	
.popup {
	
width: 90%;
	
margin: auto 5%;
	
}
	
}
	
.popup .popup-inner {
	
position: relative;
	
padding: 1em;
	
}
	
.popup .popup-inner input.s3-btn-close {
	
position: absolute;
	
top: -0.5em;
	
right: -0.5em;
	
background: black;
	
border: solid 2px white;
	
color: white;
	
cursor: pointer;
	
border-radius: 15px;
	
outline: none;
	
}
	
/*************
	
S3 Button
	
*************/
	
input.s3-btn {
	
background: #4E92DF;
	
border: none;
	
width: 30%;
	
height: 50px;
	
cursor: pointer;
	
position: absolute;
	
top: 0;
	
color: white;
	
right: 0;
	
bottom: 0;
	
left: 0;
	
margin: auto;
	
font-size: 18pt;
	

	
}
	
.s3-center {
	
text-align: center;
	
}
	
</style>

LINK DEMO: SEE HERE 

3 - javascript 

<script>
	
// Popup Open
	
function popupOpen() {
	
document.getElementById("popup").style.display = "block";
	
document.getElementById("overlay").style.display = "block";
	
}
	
// Popup Close
	
function popupClose() {
	
document.getElementById("popup").style.display = "none";
	
document.getElementById("overlay").style.display = "none";
	
}
	
</script>

LINK DEMO: SEE HERE