Question

加载页面时，模态不会自动加载。我想知道我做错了什么或者我错过了什么。我遇到的另一个问题是我无法使按钮居中，是否有办法使用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">&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">
                    <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>

Answer 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">&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>

Answer 2

根据您的建议，请包含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 '

删除空间，它应该工作得很好。

Bootstrap Modal无法加载

2 个答案:

修改