Home > Article > Web Front-end > How to implement js pop-up window in the page? (various style examples)

How to implement js pop-up window in the page? (various style examples)

藏色散人Original: 2018-08-14 15:56:5115624browse

This article mainly introduces how to use simple js code to achieve various pop-up window effects on web pages. As we all know, if you register, close, exit, etc. on the website, a prompt window will appear. This function greatly reduces user errors and improves the security of user information. So some novices may ask, how is this judgment effect achieved? Is it difficult to operate? In fact, it will be easy to understand as long as you go through the simple and easy-to-understand js pop-up code examples in this article.

Here I will introduce to you three ways to use js to customize pop-up windows. I hope this article can help interested friends learn about the code principles of js custom pop-up windows!

The specific example of the first js pop-up code is as follows:

<!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>

The effect is as follows:

How to implement js pop-up window in the page? (various style examples)

Note: JavaScript alert() function

alert--pops up a message dialog box (there is an OK button in the dialog box)

alert, Chinese "reminder" Meaning

The specific example of the second js pop-up code is as follows:

<!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>

The effect is as follows:

How to implement js pop-up window in the page? (various style examples)

Note: The parameter in the confirm() function is the prompt of the confirmation box. The return value of this function is Boolean. If you click OK, the return value is true. If you click Cancel, the return value is false.

The specific example of the third js pop-up code is as follows:

<!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>

The effect is as follows:

How to implement js pop-up window in the page? (various style examples)

##Note : The third type of js pop-up window code needs to be noted that prompt has two parameters, the first is the prompt, and the second is the default value in the dialog box when the dialog box comes out. If the cancel button is clicked, the return value is null and the type is object. If you click the confirmation button, the return value is the entered string (empty string when not entered), and the type is string.

[Related article recommendations]

js pop-up window Basic explanation

How to use JavaScript to realize the pop-up prompt box in the lower right corner

How to use JS and CSS3 to create a cool pop-up window effect

jQuery implementation of simple pop-up window example

The above is the detailed content of How to implement js pop-up window in the page? (various style examples). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of methods for passing parameters in js (with code)Next article：Summary of methods for passing parameters in js (with code)

See more

How to implement js pop-up window in the page? (various style examples)

Related articles