HTML、CSS、jQuery: 美しいモーダルを構築する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTML、CSS、jQuery: 美しいモーダルを構築する

王林

Oct 25, 2023 pm 12:03 PM

cssjqueryhtmlモーダルボックス

HTML、CSS、jQuery: 美しいモーダルを構築する

HTML、CSS、jQuery: 美しいモーダルボックスを構築する

はじめに:

ポップアップウィンドウまたはモーダルボックスは、Web ページでよく使用されます。情報を表示し、インタラクティブな効果を実現します。この記事では、HTML、CSS、jQuery を使用して美しいモーダルボックスを構築する方法を、具体的なコード例とともに紹介します。

1. HTML 構造:

まず、モーダルボックスに対応する HTML 構造を作成する必要があります。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>漂亮的模态框</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button class="open-btn">打开模态框</button>

    <div class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h1 id="这是一个漂亮的模态框">这是一个漂亮的模态框</h1>
            <p>欢迎使用模态框示例</p>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

上記のコードでは、モーダルボックスを開くボタンを作成し、モーダルボックスのコンテナとして div 要素を使用します。モーダルボックスのコンテンツは modal-content の div に配置され、閉じるボタンは span 要素と close-btn を使用します。 クラス名が設定されています。

2. CSS スタイル:

次に、モーダルボックスにいくつかのスタイルを追加する必要があります。 style.css という名前のファイルを作成し、次のスタイルコードをファイルに追加します:

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    animation-name: modalopen;
    animation-duration: 0.4s;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalopen {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

上記のコードでは、以下で説明するいくつかの一般的な CSS スタイルが使用されています。

クラスは、モーダルボックスの表示・非表示、位置、幅、高さ、背景色の設定など、モーダルボックスの基本的なスタイルを設定するために使用されます。
クラスは、背景色、境界線、影などを含むモーダルボックスのコンテンツのスタイルを設定するために使用されます。
クラスは、色、フォントサイズなどを含む閉じるボタンのスタイルを設定するために使用されます。
は、モーダルボックスが縮小から拡大への遷移効果を持つようにアニメーション効果を定義するために使用されます。

最後に、jQuery を使用してモーダルボックスの機能を実装します。

script.js

というファイルを作成し、次のコードをファイルに追加します。 <pre class='brush:php;toolbar:false;'>$(document).ready(function() { $(".open-btn").click(function() { $(".modal").fadeIn(); }); $(".close-btn").click(function() { $(".modal").fadeOut(); }); });</pre>上記のコードでは、jQuery の

fadeIn()

と fadeOut() を使用します。 モーダルボックスの表示と非表示を制御するメソッド。結論:

HTML、CSS、jQueryの連携により美しいモーダルボックスを構築し、ボタンをクリックすると開き、閉じるボタンをクリックするとモーダルボックスを閉じる機能を実現しました。。独自のニーズに応じて、モーダルボックスのスタイルとインタラクションをカスタマイズおよび拡張できます。この記事がお役に立てば幸いです。

参考リンク：

jQuery公式ドキュメント：https://api.jquery.com/

CSSアニメーション：https://www.w3schools.com /css/css3_animations.asp

以上がHTML、CSS、jQuery: 美しいモーダルを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles