2015-10-14 2 views
3

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

$('#myModal').modal('show'); 

Но это просто не работает, Где я сделал неправильно?

Вот код

<html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
</head> 
<body> 
    <!-- Button --> 
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Get Started</button> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </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> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body> 
</html> 
+0

http://jsfiddle.net/sandenay/kvq4hwu8/ –

+0

Работаю отлично для меня –

+3

У вас нет закрывающего тега для вашего скрипта bootstrap !! ты это заметил? Я имею в виду, что вам не хватает '>' перед '' –

ответ

4

Проблема заключается в том, что JQuery 3.0.0-alpha1 версия не полностью поддерживает бутстрапе 3.3.5

Причины модальный не показывает

  • либо модальный триггер с помощью кнопки, используя самозагрузки поведения по умолчанию ИЛИ
  • открытие модального с jQuery $("#myModal").modal("show")

потому, что .modal свойство display:none не меняется на display:block

Fiddle

Solution-1

коммутаторе назад к последней стабильной версии JQuery jQuery 2.x

Решение-2 с использованием JQuery 3.0.0-alpha1

Использования самонастройки модального event слушателя и изменить свойство .modal от display:none до diaply:block когда показал модальное .;

Если с помощью кнопки, чтобы вызвать модальный

$(document).ready(function() { 
    $("#myModal").on('shown.bs.modal', function() { 
     $(".modal").css('display', 'block'); 
    }) 
}); 

Fiddle

При использовании JQuery, чтобы открыть модальное

$(document).ready(function() { 
    $("#myModal").modal("show").on('shown.bs.modal', function() { 
     $(".modal").css('display', 'block'); 
    }) 
}); 

Fiddle

+0

Что касается использования только атрибутов данных? –

+0

атрибуты данных - это модальное поведение bootstrap по умолчанию, модальное - это триггер, но оно не будет отображаться, это свойство .modal' css не будет изменяться от 'display: none' до' display: block', так что jQuery 3.x работает только заключается в использовании пользовательского кода для изменения свойства '.modal' css для отображения модальности. – Shehary

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