JavaScript は Web ページにポップアップ ボックス機能をどのように実装しますか?

JavaScript Web ページにポップアップ ボックス機能を実装するにはどうすればよいですか?

Web 開発では、ユーザー情報の入力や操作の確認などのインタラクティブな効果を実現するために、ポップアップ ボックス機能を使用する必要がよくあります。 JavaScript には、Web ページのポップアップ ボックス機能を簡単に実装できるいくつかの組み込みメソッドとプロパティが用意されています。

1.alert() メソッドを使用してプロンプト ボックスをポップアップ表示する

最も一般的なポップアップ ボックスは、alert() メソッドで、ユーザーにメッセージを表示するために使用できます。ユーザーを選択し、ユーザーが「OK」ボタンをクリックするまで待ちます。その後、ポップアップ ウィンドウを閉じます。コード例は次のとおりです。

alert("这是一个提示框");

ユーザーが Web ページを開くと、すぐにプロンプ​​ト ボックスがポップアップ表示され、「これはプロンプト ボックスです」という内容が表示されます。ユーザーが [OK] ボタンをクリックすると、プロンプト ボックスが閉じます。

2.confirm() メソッドを使用して確認ボックスを実装します。

confirm() メソッドは、ユーザーに確認ボックスを表示し、実行を確認するかどうかをユーザーに尋ねるために使用されます。ユーザーは「OK」ボタンまたは「キャンセル」ボタンをクリックすることを選択できます。コード例は次のとおりです。

if (confirm("确定要删除这条记录吗？")) {
    // 用户点击确定按钮后执行的代码
    console.log("执行删除操作");
} else {
    // 用户点击取消按钮后执行的代码
    console.log("取消删除操作");
}

ユーザーが Web ページを開くと、確認ボックスがポップアップ表示され、「このレコードを削除してもよろしいですか?」という内容が表示されます。ユーザーが「OK」ボタンをクリックすると、コンソールには「削除操作を実行します」と出力され、「キャンセル」ボタンをクリックすると、コンソールには「削除操作をキャンセルします」と出力されます。

3. 入力ボックスのポップアップ ウィンドウを実装するには、prompt() メソッドを使用します。

prompt() メソッドは、入力ボックスのあるダイアログ ボックスをユーザーに表示するために使用されます。ユーザーは入力ボックスに内容を入力し、「OK」または「キャンセル」ボタンをクリックします。コード例:

var name = prompt("请输入您的姓名：");
if (name) {
    alert("您的姓名是：" + name);
} else {
    alert("您没有输入姓名");
}

ユーザーが Web ページを開くと、ユーザーに名前の入力を求めるダイアログ ボックスが表示されます。ユーザーは入力ボックスに内容を入力し、「OK」または「キャンセル」ボタンをクリックします。ユーザーが「OK」ボタンをクリックして名前を入力すると、入力した名前を表示するプロンプトボックスがページにポップアップ表示されます。ユーザーが [キャンセル] ボタンをクリックするか、名前を入力しない場合、ページ上に「名前が入力されていません」というプロンプト ボックスが表示されます。

4. カスタム HTML と CSS を使用してポップアップ ボックスを実装する

組み込みメソッドを使用するだけでなく、カスタム HTML と CSS を使用してポップアップ ボックス機能を実装することもできます。コード例は次のとおりです。

HTML 部分:

<button onclick="showPopup()">显示弹出框</button>

<div id="popup" class="popup-container">
    <div class="popup-content">
        <h2>我是弹出框</h2>
        <p>这是弹出框的内容</p>
        <button onclick="hidePopup()">关闭</button>
    </div>
</div>

CSS 部分:

.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    text-align: center;
}

JavaScript 部分:

function showPopup() {
    var popup = document.getElementById("popup");
    popup.style.display = "block";
}

function hidePopup() {
    var popup = document.getElementById("popup");
    popup.style.display = "none";
}

ユーザーが「表示」をクリックすると、ポップアップ ボックス」ボタンを押すと、JavaScript は showPopup() 関数を呼び出し、ポップアップ ボックスの表示属性を「ブロック」に設定して、ポップアップ ボックスが画面の中央に表示されるようにします。ユーザーがポップアップ ボックスの [閉じる] ボタンをクリックすると、JavaScript は hidePopup() 関数を呼び出し、ポップアップ ボックスの表示属性を「none」に設定して、ポップアップ ボックスを非表示にします。

上記は、JavaScriptを使用してWebページにポップアップボックス機能を実装する方法とコード例です。これらの方法を通じて、Web ページのインタラクション効果を簡単に実現し、ユーザー エクスペリエンスを向上させることができます。

以上がJavaScript は Web ページにポップアップ ボックス機能をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。