ホームページ > 記事 > ウェブフロントエンド > ページにjsポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)
ページにjsポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)
- 藏色散人オリジナル
- 2018-08-14 15:56:5115627ブラウズ
この記事では主に、単純な 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>効果は次のとおりです:
注: 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>効果は次のとおりです。
注: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>効果は次のとおりです:
注: 3 番目の種類の JS ポップアップ ウィンドウ コードには注意する必要があります。このプロンプトには 2 つのパラメータがあり、その前にプロンプトが表示されます。その場合、ダイアログ ボックスが表示されたときのデフォルト値が以下になります。キャンセルボタンをクリックした場合、戻り値はnull、型はオブジェクトになります。確認ボタンをクリックすると、戻り値は入力文字列(入力がない場合は空文字列)、型はstringになります。
【おすすめ関連記事】
右下隅の JavaScript 実装 プロンプト ボックスをポップアップする方法
JS と CSS3 を使用してクールなポップアップ ウィンドウ効果を作成する方法
jQuery を使用して簡単なポップアップ ウィンドウの例を実装する
以上がページにjsポップアップウィンドウを実装するにはどうすればよいですか? (各種スタイル例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。