閉じるボタンhtml

HTML の閉じるボタンは、Web ページまたはアプリケーションのウィンドウまたはポップアップ ボックスを閉じるために使用されます。閉じるボタンは通常、アイコンまたはテキストであり、ユーザーはボタンをクリックすることで現在のウィンドウまたはポップアップ ボックスを閉じることができます。この記事では、HTML の閉じるボタンと、さまざまな種類の閉じるボタンを実装する方法を紹介します。

1. 閉じるボタンの基本的な使い方

HTML では、最も基本的な閉じるボタンは button 要素であり、具体的な実装は次のとおりです。閉じるボタン メソッドは非常に単純で、ユーザーがボタンをクリックすると、JavaScript の

window.close()

関数が呼び出され、現在のウィンドウが閉じられます。 2. 閉じるボタンのアイコン スタイル

テキスト ボタンに加えて、画像やアイコンを使用して閉じるボタンを実装し、視覚効果を追加することもできます。一般的に使用される終了アイコンには、

#、# などがあり、フォント アイコンやカスタム画像を使用して実装できます。 1. フォント アイコンを使用する

フォント アイコンは、CSS を通じて色、サイズ、その他のスタイルを指定できるため、より柔軟で便利です。さらに、フォント アイコンはさまざまな解像度の画面に適応できるため、より鮮明でスムーズになります。以下は、Font Awesome フォント アイコンを使用した閉じるボタンの例です。

<button onclick="window.close()">关闭</button>

ここでは、

link

要素を使用して Font Awesome CSS ファイルをインポートし、 をネストします。 button # 要素の i## で、その class 属性を fas fa-times に設定します。これは、times アイコンを使用することを意味します。ユーザーが閉じるボタンをクリックすると、JavaScript の window.close() が実行されます。 2. カスタム画像を使用する

カスタム画像を使用して閉じるボタンを実装するには、まず画像を準備する必要があります。この画像を Web ページに表示するのにそれほど時間はかかりません。消費する。次の例では、PNG 形式の閉じるアイコンを使用しています。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<button onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

ここでは、ボタンに

img

要素をネストし、

src 属性を使用して、ボタンの URL を指定します。 image, alt 属性は画像の説明であり、ユーザーがボタンをクリックすると、JavaScript の window.close() が実行されます。 3. 閉じるボタンのスタイル デザイン

見栄えの良いボタンはユーザー エクスペリエンスを向上させることができます。次に、閉じるボタンのスタイルを設定しましょう。

1. ワイヤーフレーム ボタン

ワイヤーフレーム ボタンは、軽量またはフラット スタイルのデザインでよく使用され、ボタンの境界線、色、フォントなどは CSS スタイルで設定できます。

次は、ワイヤーフレーム スタイルを使用した閉じるボタンの実装です:

<button onclick="window.close()">
  <img src="close.png" alt="关闭">
</button>

ボタンのスタイルを設定するために、

close-button

という名前のクラス名を追加しました。対応する CSS コードは次のとおりです:

<button class="close-button" onclick="window.close()">关闭</button>

上記のコードは、次のボタン スタイルを実装します:

2. ボタン アイコン

Inテキストの説明を使用することに加えて、ボタンはアイコンを通じて機能を表現することもできます。以下では、以前に紹介したフォントアイコンとカスタムピクチャを組み合わせて、アイコン付きの閉じるボタンを実装します。

.close-button {
  border: 1px solid #999;
  color: #999;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  transition: all .3s ease-in-out;
}

.close-button:hover {
  background-color: #999;
  color: #fff;
}

ここでは新しいクラス名

close-icon-button

を追加し、ボタン埋め込み要素のクラス名

i も設定していることに注意してください。 fas fa -times は、times アイコンを使用することを意味します。 次は、対応するスタイル コードです:

<button class="close-icon-button" onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

上記のコードは、次のボタン スタイルを実装します:

4. さまざまなタイプのボタンアプリケーション シナリオ 閉じるボタン

閉じるボタンには多くの種類があり、実際のアプリケーションのニーズに基づいてさまざまな種類の閉じるボタンを選択する必要があります。このセクションでは、いくつかの一般的なニーズに応じて閉じるボタンを紹介します。

1. モーダル ボックスの閉じるボタン

モーダル ボックスは、Web ページで広く使用されているポップアップ ウィンドウです。同時に、モーダル ボックスには、ポップアップ ウィンドウを閉じるための閉じるボタンが必要です。

一般的に、モーダル ボックスの閉じるボタンはモーダル ボックスの右上隅に配置する必要があります。具体的な実装は次のとおりです:

.close-icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover {
  transform: rotate(45deg);
}

.close-icon-button i {
  color: #999;
  font-size: 14px;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover i {
  color: #fff;
}

ここで関数を追加したことに注意してください。

closeModal ()

というモーダル ボックスを閉じるために使用される JavaScript 関数。

次は、対応するスタイル コードです:

<div class="modal">
  <button class="close-icon-button" onclick="closeModal()">
    <i class="fas fa-times"></i>
  </button>
  <!-- 模态框内容 -->
</div>

上記のコードは、次のモーダル ボックス効果を実現します:

2. 複数のタブ ページの閉じるボタン

複数のタブ ページがあるシナリオで、ユーザーが現在のタブ ページを閉じる必要がある場合、タブ ページの閉じるボタンを使用できます。

以下はカスタム画像スタイルを使用した閉じるボタンの例です:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
}

対応する CSS コードは次のとおりです:

<div class="tab">
  <button class="close-tab-button" onclick="closeTab()">
    <img src="close.png" alt="">
  </button>
  <a href="#">标签页标题</a>
</div>

上記のコードは次のタブを実現します。ページ効果:

##結論

この記事では、HTML での閉じるボタンの基本的な使用法、アイコン スタイルとスタイルのデザイン、および実装について紹介します。さまざまなアプリケーション シナリオでの [閉じる] ボタン。 Web ページやアプリケーションをより適切にデザインするのに役立つことを願っています。

以上が閉じるボタンhtmlの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。