Bootstrap Modal Загружается, но не отвечает на вопросы

Я прочитал много тем по этой теме, но никто не ответил на вопрос, который у меня есть. Я пытаюсь создать наложение модального вида, которое охватывает ширину страницы. Тем не менее, модальное отображение, но оно не реагирует. Он затемнен и кнопки не работают. Это, как я загружаю свои активы:Bootstrap Modal Загружается, но не отвечает на вопросы

<!-- Bootstrap Core --> 
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 

<!-- Custom CSS --> 
<link rel='stylesheet' href='styles/application.css'> 

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="scripts/bootstrap.min.js"></script>

И это код, который я бегу на модальный:

</head> 
    <body> 
    <!-- Modal --> 
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
      <h3>Modal Body</h3> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     </div> 
    </div> 

    <div class="container-fluid"> 
     <%= yield %> 
    </div>  
    </body> 
</html>

И это, где я хочу вызван. И я думаю, потому что у меня есть эффект анимации, который он может прикрутить к событию. Обратите внимание, что это первое, что есть в пределах доходности:

<div class="container-fluid"> 
    <div class="row"><div class="col-md-12"><h1>Title</h1></div> 
      <div class="row">  
      <div class="col-md-3"> 
       <div class="menu-item-1 card effect_hover"> 
       <a class="modal-link" data-toggle="modal" data-target="#basicModal"> 
        <div class="card_front"> 
        <span class="icon-home3 card_text"></span><br>ABOUT 
        </div> 
       <div class="card_back"> 
        <span class="card_text">Learn all about our community!</span> 
       </div> 
       </a> 
       </div> 
      ...

Итак, все. Я прочитал документацию по Bootstrap и скопировал код на страницу, но эта же проблема остается. Я также попытался использовать локальную версию ресурсов начальной загрузки. Мысли?

источник

2015-03-07 user3162553

Я пытаюсь создать наложение модального вида, которое охватывает ширину страницы.

ну в этом случае вам нужно отредактировать нижнюю строку CSS в bootstrap.css (не рекомендуется) или в вашем пользовательском файле css.

Heres линия:

@media (min-width: 768px) { 
    .modal-dialog { 
    width: 100%; // by default its 600px. 
    margin: 30px auto; 
    }

Бутстраповское карусельного построен, чтобы быть отзывчивым, увидеть скриншоты:

На больших экранах.

On bigger screen .

На небольших экранах.

On smaller screens

Вы должны быть с некоторым содержанием внутри модального, который не реагирует или, вернее, с фиксированной шириной.

, если вы посмотрите на стили для модального, в bootstrap.css, вы увидите, что,

.modal-dialog { 
    position: relative; 
    width: auto; 
    margin: 10px; 
}

ширина установлена в автоматический режим, за исключением, когда экран шириной 768 или больше, в в каком случае устанавливается ширина.

width:600px;

источник

2015-03-07 03:05:50

Благодарим за помощь. У вас есть идеи, почему кнопки не будут работать на модальном? У них есть необходимые атрибуты, но экран потемнеет (в том числе модальный), и отмена не выйдет из вида. – user3162553

@ user3162553, Есть 3 способа закрыть модальный, после его всплывания, 1. нажмите кнопку закрытия, 2. нажмите на значок «x», нажмите на полупрозрачный черный фон (это может быть отключен путем передачи в фоновом режиме: 'static') –

Фактически, эффект, который я получаю, - это просто полноэкранный наложение. Я думал, что модальное решение, но, может быть, есть лучшее. – user3162553

Bootstrap Modal Загружается, но не отвечает на вопросы

ответ

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