페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)-JS 튜토리얼-php.cn

페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)

藏色散人

풀어 주다： 2018-08-14 15:56:51

원래의

15736명이 탐색했습니다.

이 글에서는 간단한 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>

로그인 후 복사

효과는 다음과 같습니다.

페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)

참고: 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>

로그인 후 복사

효과는 다음과 같습니다:

페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)

참고: 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 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)

참고: 세 번째 종류의 js 팝업창 코드에 주목해야 합니다. 해당 프롬프트에는 프롬프트가 앞에 오는 두 개의 매개변수가 있습니다. 그렇다면 다음은 대화 상자가 나올 때 나타나는 기본값입니다. 취소 버튼을 클릭하면 반환 값은 null이고 유형은 객체입니다. 확인 버튼을 클릭하면 반환값은 입력 문자열(입력이 없을 때 빈 문자열)이고, 유형은 문자열입니다.

[관련 추천글]

js 팝업창 기본 설명

오른쪽 하단에 JavaScript 구현 프롬프트 상자 팝업하는 방법

JS와 CSS3를 사용하여 멋진 팝업창 효과 만드는 방법

jQuery로 간단한 팝업창 예제 구현

위 내용은 페이지에 js 팝업 창을 구현하는 방법은 무엇입니까? (다양한 스타일의 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!