Bootstrap Modal не отвечает

Question

Я использую модальный, который я использовал с предыдущего сайта, где он работает нормально. Разница заключается в том, что этот модальный режим будет отображаться только в IE9 только для того, чтобы направлять пользователей в лучший браузер. Я смог проверить его только с помощью предупреждения и прекрасно работать.

Однако по какой-то причине, когда я передаю код, который я сделал для предыдущего сайта на этом новом сайте, Modal не отвечает, и одна точка не отображается на сайте.

Когда я попытаюсь закрыть кнопку «Закрыть», она просто обновит страницу. Я не уверен, почему и когда я закрываю кнопку «X», это тоже не работает.

Код вставляется в файл coldfusion, и я не уверен, вызвал ли он конфликт или нет.

Любая помощь будет оценена по достоинству.

Вот что я сделал для модального. т.е. только определяет, является ли он IE9 или нет:

<!---<div class="ie-only" style="overflow-y:hidden;"> 
     <div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;"> 
      <div class="modal-dialog modal-md custom-height-modal"> 
       <div class="modal-content"> 
        <div class="modal-header" style="background-color:##428bca"> 
         <button type="button" class="close" data-miss="modal">x</button> 
         <h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>       
        </div><!---Modal-Header Div---> 
        <div class="modal-body"> 
         <p style="text-align:center">You are using an outdated browser.<br /> <br /> <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p> 
        </div><!---Modal-Body Div---> 
        <div class="modal-footer"> 
         <p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p> 
        </div><!---Modal-Footer Div---> 
       </div><!---Modal-Content Div---> 
      </div><!---Custom Height Div---> 
     </div><!---Modal Fade in Div---> 
    </div><!---Start of Modal Div--->    
    <!--End of Modal container--> ---> 
    <!---<script> 
      $(function(){ 
       $('##myModal').modal('show'); 
      } 
      </script> 
       <div class="modal-backdrop fade in"></div>---> 

Answer 1

Похоже, что проблема синтаксиса в коде:

$(function(){ 
    $('##myModal').modal('show'); 
} 

Это неверно; он должен быть:

$(function(){ 
    $('#myModal').modal('show'); 
}); 

При коррекции нагрузки модальных как модальный, который, в свою очередь, приводит к тому, кнопку Закрыть, чтобы работать, как ожидалось. При отсутствии модальности все еще загружается (потому что у вас активировано in), но загружает отсутствующий оверлей и отсутствует привязка к Modal JS Bootstrap, которая объясняет, почему ваша кнопка закрытия не работает.

Вы можете увидеть пример функциональной здесь: http://www.bootply.com/24IPYP8O3F

Почему ваш код не работает

in класса на вашем Modal div инструктирует Bootstrap, чтобы сделать что модальный видимым, и положение его в соответствии с Bootstrap CSS. Ваш jQuery ошибочен, поэтому Bootstrap рассматривает это как немного HTML, который является частью документа.

Как только вы исправите свой загрузочный бункер jQuery, он будет как и ожидалось; как компонент модального Javascript. Как только это произойдет, оно представлено с наложением (по умолчанию), и атрибуты data-dismiss обрабатываются правильно.

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