ブートストラップモードがクリックで閉じることはありません

Question

私は非常にweb devです。まだJavaScriptに精通していません。私は、別のページのために作成された私たちのdevの人のコードを使用してロードされますを使用してエラーメッセージを作成しています。私は、クリックイベントで表示され、クリックイベントで閉じるモーダルを作成しました。これについては、返されたURLパラメータに基づいてモーダルショーを開催しています。そして、私は開発者の1人がブートストラップ方式ではなく別のページからコピーしたコードを使用しています。

以下のコードはモーダルショーを行いますが、モーダルを閉じるために使用するボタンは機能しません。理由は分かりません。

これが返されたときにURLを追加しますタグです：

(**...?companyName=ACME47 & err1=0 & err2=0 & err3=1**) 

エラー値が1のときされることでそのエラーのテキストとエラーモーダルを表示するようにページをロードします。

私はフォームに使用しているコードです（スタイルシートが付いていないので、違って見えます）。

jQuery(document).ready(function() { 

    // jQuery code snippet to get the dynamic variables stored in the url as parameters and store them as JavaScript variables ready for use with your scripts 

    $.urlParam = function(name) { 
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
    if (results == null) { 
     return null; 
    } else { 
     return results[1] || 0; 
    } 
    } 

    // Get url parameters 

    var err1 = new Number($.urlParam('err1')); 
    if (isNaN(err1)) { 
    err1 = new Number(0); 
    } 
    var err2 = new Number($.urlParam('err2')); 
    if (isNaN(err2)) { 
    err2 = new Number(0); 
    } 
    var err3 = new Number($.urlParam('err3')); 
    if (isNaN(err3)) { 
    err3 = new Number(0); 
    } 

    console.log('err1: ' + err1); // Writes a message to the browser console [f12] 
    console.log('err2: ' + err2); // Writes a message to the browser console [f12] 
    console.log('err3: ' + err3); // Writes a message to the browser console [f12] 
    console.log('CompanyName: ' + $.urlParam('companyName')); // Writes a message to the browser console [f12] 

    // Display error message function 

    // Read a page's GET URL variables and return them as an associative array. 

    if (err1 > 0) { 
    $("#error-box").show(); 
    $("#error-1").show(); 
    }; 
    if (err2 > 0) { 
    $("#error-box").show(); 
    $("#error-2").show(); 
    }; 
    if (err3 > 0) { 
    $("#error-box").show(); 
    $("#error-3").show(); 
    }; 

}); 

<div class="modal" id="error-box" style="display: none;" tabindex="-1" role="dialog" aria-labelledby="error-boxLabel"> 
    <div class="modal-dialog" role="document" style="height:200px;"> 
    <div class="modal-content" style="height: 100%;"> 
     <div class="modal-header alert-danger"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title text-danger">Form Submission Error</h4> 
     </div> 
     <div class="modal-body alert-danger" style="height: 100%;"> 
     <div class="textWrapper"> 
      <ul> 
      <li id="error-1" style="display: none;">That email address is already in use. (01)</li> 
      <li id="error-2" style="display: none;">A company with that name already has an account in this system. (02)</li> 
      <li id="error-3" style="display: none;">An unknown error has occurred. If your E-Mail or Phone Number was correctly filled in, you will be contacted shortly. (03)</li> 
      </ul> 
     </div> 
     </div> 
     <div class="modal-footer modal-footer-text"> 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

は、これは、私はあなたがフィドルhttps://jsfiddle.net/sxh0n7d1/53/

ノートを参照してくださいしたいと思うものです：それがどのように動作するか確認するために何かがあるように私は、フィドルに表示するすべてのエラーを設定します。

はあなたがモーダルを表示するjQueryのshow()メソッドを使用すべきではない

$('.close, .btn-danger').click(function() { 
     $("#error-box").hide(); 
    }); 

Answer 2

あなたはJavaScriptにこれを追加します。そうすることでブートストラップに登録されないので、data-dismiss属性を持つ要素を閉じることはありません。 Bootstrap's methodを使用します。また、あなたのエラーのコンテナを表示するには、ブートストラップのshow.bs.modalコールバックを使用する必要があります

$("#error-box").modal('show'); 

注意。モーダルが開始されるまでjQueryで利用できない可能性があります。