ページにjsポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)-jsチュートリアル-php.cn

ページにjsポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)

藏色散人

リリース： 2018-08-14 15:56:51

オリジナル

15724 人が閲覧しました

この記事では主に、単純な JS コードを使用して Web ページ上でさまざまなポップアップウィンドウ効果を実現する方法を紹介します。ご存知のとおり、Web サイトで登録、終了、終了などを行うと、プロンプトウィンドウが表示されます。この機能により、ユーザーのエラーが大幅に減少し、ユーザー情報のセキュリティが向上します。初心者の中には、この判定効果はどのようにして実現されるのかと疑問に思う人もいるかもしれません。操作は難しいのですか?実際、このシンプルでわかりやすい js ポップアップコードの例を使用すると、簡単に理解できるようになります。

ここではjsでポップアップウィンドウをカスタマイズする3つの方法を紹介します。この記事が、興味のある友人が 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 メッセージダイアログボックス (ダイアログボックス内に [OK] ボタンがあります)

alert (中国語で「リマインダー」を意味します)

2 番目の 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ポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)

注:confirm() 関数内パラメーターは確認ボックスのプロンプトです。この関数の戻り値はブール値で、「OK」をクリックすると戻り値は true になり、「キャンセル」をクリックすると戻り値は false になります。

3 番目の 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ポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)

注: 3 番目の種類の JS ポップアップウィンドウコードには注意する必要があります。このプロンプトには 2 つのパラメータがあり、その前にプロンプトが表示されます。その場合、ダイアログボックスが表示されたときのデフォルト値が以下になります。キャンセルボタンをクリックした場合、戻り値はnull、型はオブジェクトになります。確認ボタンをクリックすると、戻り値は入力文字列(入力がない場合は空文字列)、型はstringになります。

【おすすめ関連記事】

jsポップアップウィンドウの基本解説

右下隅の JavaScript 実装プロンプトボックスをポップアップする方法

JS と CSS3 を使用してクールなポップアップウィンドウ効果を作成する方法

jQuery を使用して簡単なポップアップウィンドウの例を実装する

以上がページにjsポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。