Bootstrap Modal only triggering Backdrop

Я пытался найти решение для этого в течение нескольких часов, но по какой-то причине мода bootstrap не появляется, появляется только фон.Bootstrap Modal only triggering Backdrop

Я проверил код, чтобы он соответствовал правильному синтаксису, я включил правильные файлы и в правильном порядке. Я взял эти файлы с другого сайта, на котором он работает отлично, но не здесь. У меня есть только один файл js, и я тоже попытался отключить его.

Когда я нажимаю кнопку, я вижу на консоли, что bootstrap.js применяет классы к элементам кузова и фона, но не к элементу .modal. Это похоже на то, что он не может найти этот класс вообще. Вот код:

<button type="button" data-toggle="modal" data-target="#1"><i class="fa fa-clone"></i></button>

<div id="1" class="modal fade"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title"><h4>Dhananjay</h4></h4> 
     </div> 
     <div class="modal-body"> 
      <table class="table table-hover"> 
       <tr class="active"> 
         <th>Order ID</th><th>Source</th><th>Destination</th><th>Date</th><th>Cost</th><th></th> 
       </tr> 
            <tr> 
        <td>1</td><td>110034</td><td>113344</td><td> Thursday 19th November 2015</td><td>10</td> <!-- Change ID --> 
       </tr> 
              <tr> 
        <td>2</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID --> 
       </tr> 
              <tr> 
        <td>3</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID --> 
       </tr> 
              <tr> 
        <td>4</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID --> 
       </tr> 
              <tr> 
        <td>5</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID --> 
       </tr> 
             </table> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div>

источник

2015-12-17 Anonymous

Вы пытались изменить идентификатор на более допустимое имя? например "#mymodal". Возможно, вы можете попытаться увидеть это «http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html» –

Code Demon, да, это было решение , Такая глупая ошибка, идентификаторы не могут начинаться с числа. Можете ли вы опубликовать это в качестве ответа, чтобы я мог отметить его как правильный, для дальнейшего использования. Не то, чтобы кто-то мог совершить такую ошибку хахаха. –

Ваше имя недействительно, проверьте это [действительные идентификационные имена] (http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html%22) –

Вы пытались изменить идентификатор на более верное имя? например "#mymodal". Возможно, вы попытаетесь это увидеть? valid ID names

источник

2015-12-21 02:08:17

Вы упускаете tabindex="-1" role="dialog" на самой верхней div.

Смотрите документацию для модальных здесь: Bootstrap Modal Example

источник

2015-12-17 13:09:15

'tabindex' предназначен для смещения фокуса, а' role' - для вспомогательных читателей. Они не имеют никакого отношения к этому –

Не имея tabindex вызывает проблему, которую вы видели на iOS. Я столкнулся с этим вопросом, прежде чем я решил, что это проблема. –

Я добавлю их только для того, чтобы быть в безопасности –

А также, пожалуйста, проверьте, «данные-мишень» и идентификатор DIV одинаковы. после удаления «#» с идентификатора и проверки.

< кнопка типа = "кнопка" данные тумблер = "модальный" данные целевой = "1">

Кроме того, добавить TabIndex = "- 1" роль = "диалог" модальным.

источник

2015-12-17 13:16:41 Sravan

Bootstrap Modal only triggering Backdrop

ответ

Смежные вопросы