Cannot get modal popup to work with a tag

Question

The modal popups are no longer working on a website that I am working on. They are supposed to appear when the a-tag at the top of the screen gets clicked, but that is no longer the case.

The following code has been modified slightly from the original version, but all the changes are superficial and are meant for the privacy of the website in question. The actual problem still remains.

Here are the link and style links:

 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

Here is part of the code that is being used for the popups:

 <nav class="navbar-collapse collapse" id="myNavbar" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="#test" data-toggle="modal" class="blacklink"><span class="glyphicon glyphicon-star"></span> TEST</a></li> <ul> </nav> 

Here is what the modal div looks like:

 <div class="modal fade" id="test" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h3>Test</h3> </div> <div class="modal-body"> <p>Text goes here.</p><br /> </div> </div> </div> </div> 

From what I can tell, this code should be working properly. If anybody knows what is going on with this code, any help will be appreciated.

Answer 1

I have figured out the problem with the code.

The one thing I did not say about the page was that it was an https page. The JavaScript was coming from a http source. Ergo, if you want to get JavaScript from another source, you need to use https instead.