JavaScriptのブラウザのアラートからhtmlのポップアップに変更

Question

私はこの1つのみのために私のリーグから少しです。 私は個々のフィールドを個別に検証するフォームを持っており、特定のメッセージで標準アラートを出します。今度は、標準のアラートを、アラートメッセージでHTML内の隠れたdiv内に保持されているアラートメッセージに変更する必要があります（クライアント側）

どこから始めたらいいのかわかりません。

if(el != null) { 
       switch(el.name) { 
        case "firstName":    
         //First Name Field Validation, Return false if field is empty 
         if(f.firstName.value == "") 
         { 
          alert(bnadd_msg_002); 
          if ((typeof TeaLeaf != "undefined") && (typeof TeaLeaf.Client != "undefined") && (typeof TeaLeaf.Client.tlAddEvent != "undefined")) { 
           var nVO = { ErrorMessage : bnadd_msg_002} 
           var subtype="CustomErrorMsg"; 
           TeaLeaf.Event.tlAddCustomEvent(subtype, nVO); 
            } 
          return false; 
         } 
         break; 

Answer 1

divの内容を変更して、画面中央に絶対的に配置する関数を作成します。アラートを使用する場所でその関数を呼び出します。この「アラートボックス」には、何らかのクローズボタンが必要です。スクリプトをロードするときに、divを非表示にするイベントをクローズボタンに追加する必要があります。

いくつかの擬似/ jQueryの/ JavaScriptで実際のコード：

function betterAlert(msg){ 
    var jAlert = $('#myAlertDiv'), jWindow = $(window); 
    var nHeight = jWindow.height(); 
    var nWidth = jWindow.width(); 
    var nAlertHeight = jAlert.height(); 
    var nAlertWidth = jAlert.width(); 
    jAlert.css({top:((nWidth-nAlertWidth)/2)+'px',left:((nHeight -nAlertHeight)/2)+'px'}); 
    jAlert.html(msg); 
    jAlert.show(); 
} 
function closeAlert(){ 
    $('#myAlertDiv').hide(); 
} 
$('body, a.close').click(closeAlert); 

そして、もちろん、スタイルのCSSを使用して、あなたの心のコンテンツへのdiv。

ライブラリを使用する場合は、jQueryUIダイアログを使用することもできます。似たような機能を持っているライブラリについては確信しています。警告メッセージでdivを作成し、$（ '＃myAlertDiv'）。dialog（）を呼び出すだけです。ライブラリの欠点は、いつものように、あなたが書くことができるコードよりも少し遅いということです。なぜなら、ライブラリは必要以上に多くの機能をサポートする必要があるからです。

Answer 2

デフォルトのwindow.alertメソッドを単純に上書きできます。

window.alert = function(text) { 
    createAWonderfulDialog(text); 
}; 

ビルドインメソッドを上書きしたり変更したりすることは通常勧めませんが、これは例外です。古風なブラウザはまだモーダルダイアログで完全なブラウザをロックしていますが、これは完全に古くなっています。

だから行け！