Question

我不知道我做错了什么。模态没有出现，我不确定我做错了什么。我在jsfiddle中尝试过，当我加载网站时它仍然没有出现。无论什么帮助都会被欣赏。

<!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>

Answer 1

如果您查看控制台，您会注意到undefined is not a function。这是指您尝试在$标记中加载 jQuery之前在以下中调用<head>。

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

然后你在页面的末尾有jQuery。如果你把jQuery引用放在你的script标记之上，你就应该好了。

备注：

不会产生巨大的差异，但您可以在页面底部加载javascript。我发现调试或避免这样的事情更容易。特别是当您依赖第三方库时，例如jQuery。

除非你真的需要等待页面上的图片等加载，否则你应该使用$(document).ready()事件或清除$(function () {});

可以找到有关差异的更多信息Here。

Answer 2

你需要包含bootstrap javascript（和jQuery）javascript文件才能工作。

您可以从here

加载bootstrap.js

可以找到jQuery库的列表here

Answer 3

首先，您错过了div div的结束myModal标记。

然后你要确保你的jQuery库都已加载（bootstrap.js和jquery）。

Bootstrap模态弹出窗口没有显示

3 个答案: