'Bootstrap 3 modal not working on button click

I made a simple modal following a tutorial and when I click the button the modal does not show up. I tried changing href to data-target but that din't fix the problem. The code below is the modal code. I have nothing in my CSS or JavaScript file.

<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a>

<div class="modal fade" id="myModal">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sign up for the newsletter</h4>
                    <div class=modal-body>

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

Here's a CodePen: http://codepen.io/jordanbaron123/pen/pbamPa

htmltwitter-bootstrap


Solution 1:[1]

In your head you need to have the following. Also remove the bootstrap links at the bottom of your body. Looks to me like you might have been running an outdated version of bootstrap js. 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is a Codepen as an example.

Solution 2:[2]

Try to put the modal html in the root of the html , probably immediate after the body tag. It could be placed on the bottom of all html , but as immediate nested element of the body or one div after that.

Modal html works with immediate nesting of these following :

  • body>div>modal html
  • body>modal html

Then it will work. Otherwise if the modal html is placed inside many nested elements then it doesn't work.

Thank you.

Solution 3:[3]

Just use data-bs-target and data-bs-toggle instead data-toggle and data-target since this is the newest bootstrap syntax I am sure this gonna fix it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Charlie Fish
Solution 2 Md. Alim Ul Karim
Solution 3 Eric Aya

Related Questions