Bootstrap модальный не работает на всех

Question

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

Это мой код до сих пор

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
    <link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen"> 
    <link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen"> 
    <link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen"> 

и внутри тела у меня есть это:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Обратите внимание, что я использую некоторые другие библиотеки на участке головы, потому что мне они нужны для Google Map, может быть, я попытался удалить те, но все еще не спровоцировать Модаль v МЭН.

Answer 1

У вас есть все ваши скрипты и файлы css, загруженные внутри тега скрипта - выньте тег скрипта, который обертывает остальные.

Answer 2

Вы не должны помещать CSS-файл в тег!

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
<link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen"> 
<link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen"> 
<link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen"> 

Answer 3

Добавить эту строку Javascript файл

$(document).ready(function() { 
    $("#MyModal").modal(); 
    }); 

Answer 4

вы загружаете скрипты неправильно (некоторые из них загружены, как таблицы стилей, некоторые из них не имеют сценария тег закрытия).

Оно должно быть:

<!--STYLESHEETS--> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

    <!--SCRIPTS - MAKE SURE THE PATH IS RIGHT FOR THE BOOTSTRAP SCRIPTS--> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    <script src="bootstrap/js/bootstrap-modal.js"></script> 
    <script src="bootstrap/js/bootstrap-transition.js"></script 

Answer 5

Перед отправкой моего полным решения я хотел бы знать, у вас инициализируется своим модальный перед загрузкой. Initialization: -

$(function(){ 
$('#myModal').modal({ 
    show:true, 
    backdrop:'static' 
}); 
//now on button click 
    $('#myModal').modal('show'); 
}); 

Answer 6

У меня есть один и тот же вопрос; После долгого анализа я нахожу решение: добавление «style =» display: none; »на div modal. Я не знаю, почему, но когда вы загружаете страницу, модаль скрыт, но если вы проверите с помощью firebug, модальный восстановит выпадающее меню После показа модального и скрытого, js добавляет «style =» display: none; » и выпадающих работ.

Answer 7

Использования ниже онлайн библиотек начальной загрузки или Download from here

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

и вставьте эту ссылку, прежде чем bootstrap.js ссылки

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

Cz самозагрузка модель не работает со старым JS Editions (Can check here)

и в bootstrap модель удалить hide класс отсюда class="modal fade"

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

Это должно работать отлично.

Answer 8

вы использовали КДС или файл popper.js Если вы не включать popper.js файл вы не сможете увидеть ваши модальные окна чек ниже канадских долларов и поставить под jquery.js и bootstrap.js следующим ниже

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

сейчас он будет работать на 100%, если не я другое решение скопируйте приведенный ниже код и проверить его

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 9

Решение простое, просто удалить роль = «диалог» атрибут из тега привязки:

<a href="#myModal" data-toggle="modal">Open Modal</a>