HTML、CSS、jQuery: 通知ポップアップを備えたインターフェイスを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: 通知ポップアップを備えたインターフェイスを作成する

王林

リリース： 2023-10-26 12:34:54

オリジナル

1450 人が閲覧しました

HTML、CSS、jQuery: 通知ポップアップを備えたインターフェイスを作成する

HTML、CSS、jQuery: 通知ポップアップウィンドウを備えたインターフェイスの作成

はじめに:
現代の Web デザインでは、通知ポップアップウィンドウは次のとおりです。 a 非常に一般的な要素です。ユーザーに重要な情報を表示したり、ユーザーに何らかの操作の実行を促したりするために使用できます。この記事では、HTML、CSS、jQuery を使用して通知ポップアップウィンドウを備えたインターフェイスを作成する方法を紹介し、具体的なコード例を添付します。

1. HTML 構造
まず、HTML を使用してページの基本構造を構築する必要があります。以下は、通知ポップアップウィンドウに必要な HTML コードの例です。

<!DOCTYPE html>
<html>
<head>
    <title>通知弹窗示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <h1>通知弹窗示例</h1>
    <button id="showNotification">显示通知</button>

    <div id="notificationContainer">
        <div id="notificationContent">
            <p id="notificationMessage"></p>
            <button id="closeNotification">关闭</button>
        </div>
    </div>
</body>
</html>

ログイン後にコピー

この例では、h1 タグを使用してページのタイトルを表示し、ページの表示をトリガーするボタンを追加します。通知ポップアップウィンドウ。通知ポップアップウィンドウ自体は notificationContainer コンテナー内にある div 要素であり、通知の内容と閉じるボタンを表示する p 要素が含まれています。

2. CSS スタイル
次に、CSS を使用して通知ポップアップウィンドウの外観を美しくする必要があります。関連する CSS コードの例を次に示します。

#notificationContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: none;
}

#notificationContent {
    text-align: center;
}

#notificationMessage {
    font-size: 18px;
    margin-bottom: 10px;
}

#closeNotification {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

#closeNotification:hover {
    background-color: #0056b3;
}

ログイン後にコピー

この例では、通知ポップアップウィンドウのコンテナ (notificationContainer) を固定位置に設定し、ページの中央に配置されます。垂直方向と水平方向。背景色、角丸、影などの基本的なスタイルも設定します。通知コンテンツ (notificationContent) のテキストは中央揃えで配置され、いくつかのテキストとボタンのスタイルが設定されます。

3. jQuery インタラクション
最後に、jQuery を使用して通知ポップアップウィンドウのインタラクションを実現する必要があります。関連する JavaScript コードの例を次に示します。

$(document).ready(function() {
    $("#showNotification").click(function() {
        $("#notificationContainer").fadeIn();
    });

    $("#closeNotification").click(function() {
        $("#notificationContainer").fadeOut();
    });
});

ログイン後にコピー

この例では、.ready() 関数を使用して、ページが読み込まれた後に関連するコードが実行されるようにします。通知を表示するボタン (showNotification) がクリックされると、.fadeIn() 関数を使用して通知ポップアップウィンドウを表示します。閉じるボタン (closeNotification) がクリックされると、.fadeOut() 関数を使用して通知ポップアップウィンドウを非表示にします。

概要:
HTML、CSS、jQuery を連携させることで、通知ポップアップウィンドウを備えたインターフェイスを簡単に作成できます。通知ポップアップは、ユーザーに重要な情報を表示したり、ユーザーに何らかの操作を実行するよう促したりするために使用できます。この記事のサンプルコードが、読者がこれらのテクニックをよりよく理解し、適用するのに役立つことを願っています。

以上がHTML、CSS、jQuery: 通知ポップアップを備えたインターフェイスを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。