加载页面时，模态不会自动加载。我想知道我做错了什么或者我错过了什么。我遇到的另一个问题是我无法使按钮居中，是否有办法使用Bootstrap。除此之外，我能够使用按钮使其工作。谢谢你的帮助，我学到了很多东西。
<!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">
</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="modal-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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">
<p class="text-center"><a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal">Close</a></p>
</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script type="text/javascript">
$(function() {
$( "#modal-1" ).modal('show ');
});
</script>
</body>
</html>
答案 0 :(得分：1)
可能是对js文件的排序。请尝试以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YesICan</title>
<meta name="description" content="Hello World">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- 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">×</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>
答案 1 :(得分：0)
根据您的建议，请包含bootstrap.css和bootstrap.js文件;这非常重要。
要使按钮居中，您可以在按钮的父级上使用text--align:center，或者在元素本身上使用margin:0 auto，具体取决于您是使用内联元素还是使用块元素作为按钮。 / p>
Here's一个显示引导模态如何工作的小提琴。
请记住，如果您希望模式在页面加载时显示，请添加以下初始化脚本：
$('#myModal').modal('show');
如果你想让它隐藏起来：
$('#myModal').modal('hide');
您的代码中的问题是您有一个不必要的空间，即
$( "#modal-1" ).modal('show '); // notice how there is a space in 'show '
删除空间，它应该工作得很好。