2016-07-19 4 views
0

Я сделал простой модальный после учебника, и когда я нажимаю кнопку, модальный не появляется. Я попытался изменить href на data-target, но это не исправить проблему. Код ниже - это модальный код. В моем файле CSS или JavaScript ничего нет.Bootstrap 3 модальный не работает на кнопку щелчок

<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a> 

<div class="modal fade" id="myModal"> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Sign up for the newsletter</h4> 
        <div class=modal-body> 

        </div> 
        </div> 
       </div> 
       </div> 
      </div> 

Вот CodePen: http://codepen.io/jordanbaron123/pen/pbamPa

+0

Можем ли мы увидеть ваш код кнопки? –

+0

@CharlieFish Я добавил. –

+1

У вас есть загрузочный JS или CSS? Я забываю, если это имеет значение для модалов. Я знаю, что это происходит для определенных вещей. Я думаю, вам это нужно для модалов. –

ответ

2

В голове у вас должно быть следующее. Также удалите загрузочные ссылки внизу вашего тела. Похоже на то, что вы использовали устаревшую версию bootstrap js.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

В качестве примера приведен пример Codepen.

+1

Спасибо, это сработало! –

+0

Ницца! Рад, что смог помочь!!! –

1

Попробуйте поставить модальный HTML в корне HTML, вероятно, непосредственно после тега тела. Он может быть помещен в нижней части всего html, но в качестве непосредственного вложенного элемента тела или одного div после этого.

Модальных HTML работают с немедленным гнездования этих следующим:

  • тела> DIV> модальный HTML
  • тела> модального HTML

Тогда он будет работать. В противном случае, если модальный html размещен внутри множества вложенных элементов, он не работает.

спасибо.

+0

Это не работает. –

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