閉じるボタンhtml

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

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

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

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

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

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

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

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

ここでは、

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

<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. 閉じるボタンのスタイル デザイン

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

close-button

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

2. ボタン アイコン

.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. さまざまなタイプのボタンアプリケーション シナリオ 閉じるボタン

.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 ()

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

<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;
}

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