Question

Ok, so I hate to be that guy who posts a homework question, but I have hit the end of my rope.

I need a modal to appeal whenever I click the button.

I've tried:

The data-* way of showing the modal (as seen in the code below)
Showing the modal thru a JS function using $(#mainModal).modal('show')
Commenting out the jQuery version so that it doesn't conflict with Bootstrap's jQuery.

Nothing on the internet seems to work. Would someone mind telling me how to get the modal to show?

Thank you much!

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

   <head>
        <meta charset="UTF-8">
        <title>Chatty</title>

        <!-- Styles -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <style>

        body { 
            background-color: #333333;
            padding-top:50px;
        }

        h1 {
            color: white;
        }

        body, h1 {
            padding-bottom: 50px;
        }

        .button-spacing {
            margin-bottom: 50px;
        }

        </style>


        <script>

        </script>

   </head>

   <body class="container">

        <h1 class="text-center">Chatty App</h1>

        <button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>

        <!-- Modal -->
        <div id="mainModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        </div>

   </body>

</html>

Answer 1

You aren't loading the Javascript file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- missing this line -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">

Answer 2

<!DOCTYPE html>
<html lang="en">

   <head>
        <meta charset="UTF-8">
        <title>Chatty</title>

        <!-- Styles -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>

        body { 
            background-color: #333333;
            padding-top:50px;
        }

        h1 {
            color: white;
        }

        body, h1 {
            padding-bottom: 50px;
        }

        .button-spacing {
            margin-bottom: 50px;
        }

        </style>


        <script>

        </script>

   </head>

   <body class="container">

        <h1 class="text-center">Chatty App</h1>

        <button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>

        <!-- Modal -->
        <div id="mainModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        </div>

   </body>

</html>

Bootstrap/JQuery: Cannot get modal to show

2 个答案: