페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)
- 藏色散人원래의
- 2018-08-14 15:56:5115624검색
이 글에서는 간단한 js 코드를 사용하여 웹 페이지에서 다양한 팝업 창 효과를 구현하는 방법을 주로 소개합니다. 우리 모두 알고 있듯이 웹사이트에서 등록, 종료, 종료 등을 하면 프롬프트 창이 나타납니다. 이 기능은 사용자 오류를 크게 줄이고 사용자 정보의 보안을 향상시킵니다. 그래서 일부 초보자는 이러한 판단 효과를 어떻게 얻을 수 있습니까? 작동하기 어렵습니까? 실제로 이 간단하고 이해하기 쉬운 js 팝업 코드 예제를 통해 이해하기 쉬울 것입니다.
여기에서는 js에서 팝업 창을 사용자 정의하는 세 가지 방법을 소개하겠습니다. 이 글의 소개가 관심 있는 친구들이 js 사용자 정의 팝업 창의 코드 원리를 이해하는 데 도움이 되기를 바랍니다!
첫 번째 js 팝업창 코드의 구체적인 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>js自定义弹出框代码测试一</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f1(){
alert("这是第一种弹窗提示1 alert,单击确定后才能进行下一步的操作,只是提醒,不能对脚本产生任何改变");
}
</script>
</head>
<body>
<button onclick="f1();">弹窗提示1</button>
</body>
</html>효과는 다음과 같습니다.
참고: JavaScript Alert() 함수
alert--pop -up 메시지 대화 상자(대화 상자에 확인 버튼이 있음)
alert, 중국어로 "알림"을 의미
두 번째 js 팝업 창 코드의 구체적인 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>js自定义弹出框代码测试</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f2(){
var flag = confirm("这是第二种弹窗提示2 confirm单击确定返回true,单击取消返回false");
if(flag){
alert("你点击的是确定");
}else{
alert("你单击的是取消");
}
}
</script>
</head>
<body>
<button onclick="f2();">弹窗提示2</button>
</body>
</html>효과는 다음과 같습니다:
참고: verify() 함수에서 매개변수는 확인 상자의 프롬프트입니다. 이 함수의 반환 값은 Boolean입니다. 확인을 클릭하면 반환 값은 true입니다. 취소를 클릭하면 반환 값은 false입니다.
세 번째 js 팝업창 코드의 구체적인 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>js自定义弹出框代码测试</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f3(){
var name = prompt("请输入你的名字:","");
console.log(name);
console.log(typeof(name));
if("php中文网" === name){
alert("欢迎您:"+name);
}else{
alert("输入有误!");
}
}
</script>
</head>
<body>
<button onclick="f3();">弹窗提示3</button>
</body>
</html>효과는 다음과 같습니다.
참고: 세 번째 종류의 js 팝업창 코드에 주목해야 합니다. 해당 프롬프트에는 프롬프트가 앞에 오는 두 개의 매개변수가 있습니다. 그렇다면 다음은 대화 상자가 나올 때 나타나는 기본값입니다. 취소 버튼을 클릭하면 반환 값은 null이고 유형은 객체입니다. 확인 버튼을 클릭하면 반환값은 입력 문자열(입력이 없을 때 빈 문자열)이고, 유형은 문자열입니다.
[관련 추천글]
오른쪽 하단에 JavaScript 구현 프롬프트 상자 팝업하는 방법
JS와 CSS3를 사용하여 멋진 팝업창 효과 만드는 방법
위 내용은 페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!