Bootstrap modal не будет закрываться при нажатии

Question

Я очень новичок в веб-дизайне. Все еще не слишком знакомы с JavaScript. Я делаю сообщение об ошибке, используя которое будет загружаться с использованием кода, который один из наших разработчиков, созданных для другой страницы. Я создал модалы, которые отображаются в событии клика, а затем закрываются на событие click. Для этого у меня есть модальное шоу на основе возвращаемых параметров URL. И я использую код, который я скопировал с другой страницы, сделанный одним из наших дэв-парней (а не с модами Bootstrap).

Код ниже показывает модальное шоу, но кнопки, используемые для закрытия модального режима, не работают. Не знаю, почему.

Это тег, который добавит 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/

Примечание: Я установил все ошибки видимым в скрипку, так что есть что-то, чтобы увидеть, как это работает.

добавить к вашей JavaScript

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

Answer 2

Вы не должны использовать show() метод JQuery, чтобы показать модальный. Выполнение этого не регистрирует его с помощью Bootstrap, поэтому нет ничего, чтобы закрыть элементы, обладающие атрибутом data-dismiss. Используйте Bootstrap's method:

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

Обратите внимание, что вам может понадобиться использовать show.bs.modal обратный вызов Bootstrap, чтобы показать свои контейнеры ошибок. Возможно, они не будут доступны для jQuery до тех пор, пока модальный не будет запущен.