ホームページ > ウェブフロントエンド > jsチュートリアル > HTML、CSS、jQuery: 通知ポップアップを備えたインターフェイスを作成する

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

王林
リリース: 2023-10-26 12:34:54
オリジナル
1607 人が閲覧しました

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!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 コードの例を次に示します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

#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 コードの例を次に示します。

1

2

3

4

5

6

7

8

9

$(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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート