web-dev-qa-db-ja.com

警告ボタンをパーソナライズする方法-window.confirm（）およびwindow.alert（）

アラートと確認ボックスを異なるボタンテキストでパーソナライズした多くのWebサイトを見てきました。

デフォルトでは、これはJavaScript window.confirm()関数が出力するものです。

+-----------------------------+
|Message from webpage         |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [Ok]     [Cancel]         |
+-----------------------------+

しかし、カスタムヘッダーテキストやカスタムボタンテキストなどのカスタマイズが必要な場合はどうなりますか？

+-----------------------------+
|My custom Header             |
+-----------------------------+
|Popup text                   |
|                             |
|                             |
|                             |
|                             |
|   [HELLO]     [GOODBYE]     |
+-----------------------------+

これは、JavaScript、Jquery、またはAJAX（または別の言語））で実現できますか？その場合、例を示していただけませんか？ありがとう！

javascriptjquerypopup
13
pattyd

ここでは新しいことは何も見つかりません。作成されたコメントには、最も関連性の高いすべての情報が含まれています。

優れたサポートがあり、カスタマイズが容易なオープンソースの選択肢を検討する必要があります。 BootBoxJS を見てください（jQueryによって異なります）。

そのサイトでは、アラート、ダイアログ、その他の便利なツールの例を見つけることができます。例えば.

confirm dialog personalized

上記のソフトを使用するには：

  1. jsライブラリ圧縮 をダウンロード（js、cssなどを含む）
  2. 好きなようにファイルを解凍します。
  3. 次に サンプルコード をコピーして貼り付け、example.htmlまたは必要なものとして保存します。
  4. リンクを変更して、ダウンロードしたファイルを指すようにします（変更方法 my file を参照）。
  5. ファイルを保存し、任意のブラウザーでテストします。

私はそれをやっただけで完璧に動作します！ （FirefoxおよびChromiumの下）

[〜＃〜]注[〜＃〜]：新しいバージョンのBootStrap（v .3）そしてそれは動作しません。

5
Lucio

簡単な答えは、できません。プロンプトはこの機能をサポートしていません。

ただし、Jqueryを使用するか、独自のモーダル/ダイアログを作成して、この機能をエミュレートできます。

アイデアと例については、 jQuery UI Dialo gを参照してください。

ページから例を設定する jsfiddle を確認してください。

HTML：

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

JS

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

CSSは大きすぎて投稿できませんが、このファイルをリンクできます。

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

6
isJustMe

いいえ。 the docs の簡単なレビューが役立つ場合があります。 Javaアプレットには、これまでに見たものと同じように（ただし、まったく異なる）スタイルのUI要素があります。

HTML/CSS/JavaScriptを使用して、ユーザーエージェントのダイアログボックスのように機能する独自のダイアログボックスを作成することもできますが、そのためには多くの作業が必要です。

1
Madbreaks