Bootstrap Modal Pop-Up не отображается

Я не знаю, что я делаю неправильно. Модаль не появляется, и я не уверен, что я делаю неправильно. Я пробовал его в jsfiddle, и он все еще не появляется, когда я загружаю сайт. Какая бы помощь не была оценена.Bootstrap Modal Pop-Up не отображается

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>YesICan</title> 
<meta name="description" content="Hello World"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

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

<script type="text/javascript"> 
$(window).load(function(){ 
    $('#myModal').modal('show'); 
}); 
</script> 

</head> 

<body> 

<header> 
    <div class="jumbotron"> 
     <div class="container"> 
      <h1>Hello World</h1> 
      <h3>Modals in Bootstrap</h3> 
     </div> 
    </div> 
</header> 

<div class="container"> 
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Activate the button</button>--> 
    <div class="modal fade" id="myModal"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h3 class="modal-title" style="text-align:center">Safety Warning</h3> 
       </div> 
       <div class="modal-body">  
        <p style="text-align:center"> Your computer use can be monitored by others! Consider using a public computer or a friend's computer. Please view more computer safety tips or escape to Google. Then more computer safety tips linked to a page with details about browser history, cache, search history, etc. and escape to Google linked to Google.</p> 
        <p style="text-align:center"> To learn more how to computer safety, click the following link: <br><a href="#">Safety Tips</a></br></p> 
        <!--Wording can be better just for the meantime--> 
        <p style="text-align:center"> If you are not safe, click the following link: <br><a href="http://www.google.com">Get Me Out of Here!</a></br></p> 
       </div> 

       <div class="modal-footer"> 
        <a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal" class="pagination-centered">Close</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 


<footer> 
    <div class="container"> 
     <hr> 

     <p> 
      <small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p> 
     <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p> 
     <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small> 

     </p> 
    </div> <!-- end container --> 
</footer> 

<!-- Latest compiled and minified JavaScript --> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

источник

2015-04-04 Roberto Flores

Вы не включили библиотеку JQuery на свой сайт – Chanckjh

-1

Во-первых, вам не хватает закрытия div тег для myModal дел.

Затем вы должны быть уверены, что все ваши библиотеки jQuery загружены (bootstrap.js и jquery).

источник

2015-04-04 22:30:49

Pls объясняет нижний предел. –

Я не уверен, что я делаю неправильно. Я сделал то, что вы, ребята, сказал, что у меня уже есть, и он все еще не работает. –

Для этого необходимо включить файлы javascript javascript (и jQuery) для начальной загрузки.

Вы можете загрузить bootstrap.js из here

И список библиотеки JQuery можно найти here

источник

2015-04-04 22:30:56

У меня есть библиотеки JQuery. –

У меня есть те, которые были загружены. Вот что я добавил к нему, и он ничего не изменил и по какой-то причине не появился, когда я задал вопрос: –

Если вы посмотрите на консоли, вы заметите undefined is not a function. Это относится к тому, что вы пытаетесь позвонить $ следующим образом: до jQuery загружается в тег <head>.

$(window).load(function(){ 
    $('#myModal').modal('show'); 
});

Тогда у вас есть jQuery в конце страницы. Если бы вы поставили ссылку jQuery в свою голову выше вашего тега script, вам должно быть хорошо идти.

Примечание:

Не имеет огромное значение, но это более принято, чтобы ваш яваскрипт загрузки в нижней части страницы. Мне было легче отлаживать или избегать таких вещей. Особенно, когда вы полагаетесь на сторонние библиотеки, такие как jQuery.

Если вы действительно не нужно ждать изображений и таких на странице загрузки, вы должны использовать $(document).ready() событие или уборщик $(function() {});

Более подробную информацию о различиях можно найти Here.

источник

2015-04-14 03:52:29 technicallyjosh

Bootstrap Modal Pop-Up не отображается

ответ

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