アラートボタンをパーソナライズする方法 - window.confirm（）とwindow.alert（）

Question

アラートと確認ボックスを異なるボタンテキストでパーソナライズした多くのWebサイトがあります。デフォルトでは

が、これは何であるかはJavaScript window.confirm()機能する出力：

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

しかし、私は、カスタムヘッダーテキスト、およびカスタムボタンのテキストのようないくつかのカスタマイズを望んでいた場合はどうなりますか？

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

JavaScript、Jquery、またはAJAX（または他の言語）でこれを達成できますか？もしそうなら、私に例を教えてもらえますか？ありがとう！

Answer 1

私はここで何か新しいものを発見しません。作成されたコメントは、最も関連性の高い情報をすべて示しています。

あなたは、サポートが大きく、カスタマイズが簡単なオープンソースの代替案を検討する必要があります。 BootBoxJS（jQueryに依存）を見てください。

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

が挙げソフトを使用するには：

1. はjs library compressed（含むJS、CSSなど）
2. 解凍し、あなたがしたいものは何でもファイルをダウンロードしてください。
3. 次に、the example codeをコピーして貼り付けて、example.htmlなどで保存してください。
4. ダウンロードしたファイルを指すようにリンクを変更してください（my fileの変更方法を参照）
5. ファイルを保存し、希望するブラウザでテストしてください。

私はちょうどそれをして、それは完璧に動作します！ （FirefoxとChromiumの下で）

：新しいバージョンのBootStrap（v.3）でテストしても機能しません。

Answer 2

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

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

Answer 3

簡単な答えは、あなたがこの機能をエミュレートするためのjQueryを使用するか、または独自のモーダル/ダイアログを構築することができただしプロンプトは、

を、この機能をサポートしていない、あなたができないことです。

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

<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を投稿する大型のですが、あなたはこのファイルをリンクすることができます：ページからの例を設定する

はjsfiddle

HTMLをチェックしてください：

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