アラートボックスのボタンのスタイルをカスタマイズするにはどうすればよいですか?-jsチュートリアル-php.cn

アラートボックスのボタンのスタイルをカスタマイズするにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-04 11:11:11

オリジナル

1009 人が閲覧しました

How Can I Customize the Style of Alert Box Buttons?

アラートボックスボタンスタイルのカスタマイズ

デフォルトのアラートボックスは、アプリケーションの外観に必ずしも適合するとは限りません。幸いなことに、特に [OK] ボタンの外観を変更する方法があります。

ネイティブアラートの制限

残念ながら、ネイティブアラートボックスはシステムです。 CSS を使用してスタイル設定できない定義済みオブジェクト。この制限は、システムオブジェクトとしてのステータスに起因します。

カスタム要素の作成

このハードルを克服するには、アラートボックスの機能を複製するカスタム HTML 要素を作成することを検討してください。。これにより、必要に応じて CSS を適用し、外観をカスタマイズできるようになります。

jQuery UI Dialog

jQuery UI Dialog プラグインは、このタスクに優れています。これは、カスタマイズ可能なスタイルオプションを備えたカスタムダイアログボックスを作成するためのフレームワークを提供します。

例

次のコードスニペットは、jQuery UI を使用してカスタマイズされたダイアログボックスを作成する方法を示しています。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Custom Alert Box</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#dialog").dialog({
        buttons: {
          "OK": function() {
            $(this).dialog("close");
          }
        }
      });
    });
  </script>
</head>

<body>

  <div>

ログイン後にコピー

カスタム HTML 要素と jQuery UI などのサードパーティライブラリを使用すると、アラートボックスボタンのスタイルを簡単にカスタマイズできますアプリケーションのニーズを満たすために。

以上がアラートボックスのボタンのスタイルをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。