Popup alert trong javascript | tạo popup alert bằng html css js

This entry is part 35 of 35 in the series Tự học lập trình Javascript

Popup alert là gì thì chúng ta đã biết rồi phải không :D. Nếu bạn nào lỡ quên thì mình nhắc nhẹ nó là hộp thông báo từ trình duyêt. Nó có các phương thức alert(), prompt() , confirm ấy, ở bài viết này thì mình sẽ đi sâu về thằng này một tí. Ngoài ra thì mình sẽ tự khởi tạo popup alert bởi vì cái hộp mặc định của trình duyệt nhìn rất chuối 😀

Popup alert

alert()

phương thức này bỏ qua nha mình đã nói về nó rồi mà, mà nó cũng không có gì thú vị 😀

confirm()

Hộp xác nhận thường được sử dụng nếu bạn muốn người dùng xác minh hoặc chấp nhận điều gì đó. Khi hộp xác nhận bật lên, người dùng sẽ phải nhấp vào “OK” hoặc “No” để tiếp tục. Nếu người dùng nhấp vào “OK”, hộp sẽ trả về true . Nếu người dùng nhấp vào “Hủy”, hộp sẽ trả về false .

Chúng ta cùng làm một ví dụ để hiểu hơn về nó.

<!DOCTYPE html>
<html>
<head>
	<title>Popup Alert</title>
</head>
<body>
	<h1 style="text-align: center; color:pink"></h1>
	<script type="text/javascript">
		var h1 = document.getElementsByTagName('h1');
		var x = confirm("Yêu hay không yêu ^_^ ?");
		if (x == true){
			h1[0].innerHTML = "me too <3 <br/> I <3 U :D :D"
		}
		else if( x == false){
			for(;x!=true;){
			x = confirm("Yêu đi -_- ?");
			if(x == true)
			h1[0].innerHTML = "me too <3 <br/> I <3 U :D :D"
		}
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Popup Alert</title>

</head>

<body>

var h1 = document.getElementsByTagName('h1');

var x = confirm("Yêu hay không yêu ^_^ ?");

if (x == true){

h1[0].innerHTML = "me too <3 <br/> I <3 U :D :D"

}

else if( x == false){

for(;x!=true;){

x = confirm("Yêu đi -_- ?");

if(x == true)

h1[0].innerHTML = "me too <3 <br/> I <3 U :D :D"

}

</script>

</body>

</html>

Khá thú vị :D, trong ví dụ trên chỉ khi người dùng chọn Yes thì hộp xác nhận mới biến mất.

prompt()

Hộp prompt thường được sử dụng nếu bạn muốn người dùng nhập giá trị trước khi vào trang. Khi hộp nhắc bật lên, người dùng sẽ phải nhấp vào “OK” hoặc “Hủy” để tiếp tục sau khi nhập giá trị đầu vào. Nếu người dùng nhấp vào “OK”, hộp trả về giá trị đầu vào. Nếu người dùng nhấp vào “No”, hộp sẽ trả về giá trị rỗng.

<!DOCTYPE html>
<html>
<head>
	<title>Popup Alert</title>
</head>
<body>
	<h1 style="text-align: center; color:pink"></h1>
	<button>click</button>
	<script type="text/javascript">
		var h1 = document.getElementsByTagName('h1');
	    h1 = h1[0];
		var bt = document.getElementsByTagName('button');
	    bt = bt[0];
		console.log(bt);
		bt.onclick = function(){
			var x = prompt('Nhập giá trị'); 
			if(x == null || x == ""){
				for(;x==null || x=="";){
				x = prompt('Bạn phải nhập giá trị');
				h1.innerHTML = "Dữ liệu bạn đã nhập là: " +x;
			    }
			}
			else{
				h1.innerHTML = "Dữ liệu bạn đã nhập là: "+x;
			}
		}

	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Popup Alert</title>

</head>

<body>

<button>click</button>

var h1 = document.getElementsByTagName('h1');

h1 = h1[0];

var bt = document.getElementsByTagName('button');

bt = bt[0];

console.log(bt);

bt.onclick = function(){

var x = prompt('Nhập giá trị');

if(x == null || x == ""){

for(;x==null || x=="";){

x = prompt('Bạn phải nhập giá trị');

h1.innerHTML = "Dữ liệu bạn đã nhập là: " +x;

}

else{

h1.innerHTML = "Dữ liệu bạn đã nhập là: "+x;

}

</script>

</body>

</html>

Ở ví dụ trên thì bắt buộc bạn phải nhập giá trị cho hộp prompt.

Tạo popup alert bằng html css js

Bây giờ thì mình sẽ tự khởi tạo popup alert.

Code html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
        integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">
	<title>Bài tập javascript 3</title>
	<link rel="stylesheet" type="text/css" href="style.css">
        <script src="1.js"></script>
</head>
<body>
	<div class="khoi">
		<div class="icon">
		<i class="fas fa-check"></i>	
		</div>
		<div class="txt">
			<h3>Good Job!</h3>
		</div>
		<div class="nut">
			<button>Close</button>
		</div>
	</div>
	<button id="bt">alert</button>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"

crossorigin="anonymous">

<title>Bài tập javascript 3</title>

</head>

<body>

</div>

</div>

<button>Close</button>

</div>

<button id="bt">alert</button>

</body>

</html>

Code css:

.thanhxanh {
    height: 40px;
    background-color: #4267B2;
}

._1khoi {
    float: left;
    position: relative;
    left: 1000px;
}
.icon {
    padding: 12px 10px;

}
.icon i.fas {
    cursor: pointer;
}
.icon i.fab {
    cursor: pointer;
}
.noidung {
    position: absolute;
    right: -10px;
    opacity: 0;
    visibility: hidden;
}
.noidung {
    position: absolute;
    width: 200px;
    box-shadow: 1px 1px 1px;
  
}
.mautrang{
    color:white;
}
.ra{
    opacity: 1;
    visibility: visible;
}

.thanhxanh {

height: 40px;

background-color: #4267B2;

}

._1khoi {

float: left;

position: relative;

left: 1000px;

}

.icon {

padding: 12px 10px;

}

.icon i.fas {

cursor: pointer;

}

.icon i.fab {

cursor: pointer;

}

.noidung {

position: absolute;

right: -10px;

opacity: 0;

visibility: hidden;

}

.noidung {

position: absolute;

width: 200px;

box-shadow: 1px 1px 1px;

}

.mautrang{

color:white;

}

.ra{

opacity: 1;

visibility: visible;

}

Code js:

document.addEventListener("DOMContentLoaded",function(){
			var nut = document.getElementById('bt');
			var y = document.getElementsByClassName('khoi');
			nut.onclick = function(){
				nut.style.opacity = "0";
				nut.style.visibility = "hidden"
				y[0].style.opacity = "1";
				y[0].style.visibility = "visible";
			}
			y[0].onclick = function(){
				nut.style.opacity = "1";
				nut.style.visibility = "visible"
				y[0].style.opacity = "0";
				y[0].style.visibility = "hidden";
			}
		},false)

document.addEventListener("DOMContentLoaded",function(){

var nut = document.getElementById('bt');

var y = document.getElementsByClassName('khoi');

nut.onclick = function(){

nut.style.opacity = "0";

nut.style.visibility = "hidden"

y[0].style.opacity = "1";

y[0].style.visibility = "visible";

}

y[0].onclick = function(){

nut.style.opacity = "1";

nut.style.visibility = "visible"

y[0].style.opacity = "0";

y[0].style.visibility = "hidden";

}

},false)

Oke rồi đấy, các bạn nên sử dụng form để làm popup alert. À mà bắt buộc rồi :D, đây là mình demo thôi. Mình xin kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

Toán tử trong Javascript

Chuyển đổi kiểu dữ liệu trong javascript

Vòng lặp For trong Javascript

Các loại hàm trong Javascript

Hàm alert() confirm() prompt() trong javascript

Popup alert

Tạo popup alert bằng html css js

Similar Posts