Bootstrap's data-toggle attribute doesn't prevent the default behavior of the a tag.

So, it's redirecting you to /Lab6.html#theModal, and that's why the modal isn't showing.

Change the href attribute to #theModal only, and it will work. Take a look at the example below:

.nav, .nav li, .nav li a { display: inline-block!important; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <ul class="nav navbar-nav" id="menu"> <li><a href="/emplookup.html">Lookup</a> </li> <li><a href="/modalexample.html">Modals</a> </li> <li><a href="#theModal" data-toggle="modal">Lab 6</a> </li> </ul> <div class="modal fade text-center" id="theModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">X</button> <h1>Lab 6</h1> </div> <div class="modal-body"> <div class="panel panel-default"> <div class="panel-heading text-center"> Employee Information </div> <div class="panel-body"> <div class="row"> <div class="text-right col-xs-2">Title:</div> <div class="text-left col-xs-3" id="title"></div> <div class="text-right col-xs-2">First:</div> <div class="text-left col-xs-3" id="firstname"></div> </div> <div class="row"> <div class="text-right col-xs-2">Phone#</div> <div class="text-left col-xs-3" id="phone"></div> <div class="text-right col-xs-2">Email</div> <div class="text-left col-xs-3" id="email"></div> </div> <div class="row"> <div class="text-right col-xs-2">Dept:</div> <div class="text-left col-xs-3" id="departmentname"></div> <div class="text-left col-xs-2">Surname:</div> <div class="text-left col-xs-4"> <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" /> </div> </div> </div> </div> <div class="modal-footer"> <div class="panel-footer"> <input type="button" value="Find Employee" id="empbutton" /> <div class="col-xs-10" id="lblstatus"></div> </div> </div> </div> </div> </div> </div>

Update

The way you're trying to get modal's content from another page is incorrect.

According to Bootstrap's documentation:

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> 

So, firstly, you should change your menu.html file to be similar to the code above:

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li> 

And then, part of your Lab6.html page must reside inside your menu.html page. E.g:

<div class="modal fade text-center" id="theModal"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> 

Finally, your LAB6.html would have only the code that was inside .modal-content. E.g:

<div class="modal-header"> <button type="button" class="close" data-dismiss="modal">X</button> <h1>Lab 6</h1> </div> <div class="modal-body"> <div class="panel panel-default"> <div class="panel-heading text-center"> Employee Information </div> <div class="panel-body"> <div class="row"> <div class="text-right col-xs-2">Title:</div> <div class="text-left col-xs-3" id="title"></div> <div class="text-right col-xs-2">First:</div> <div class="text-left col-xs-3" id="firstname"></div> </div> <div class="row"> <div class="text-right col-xs-2">Phone#</div> <div class="text-left col-xs-3" id="phone"></div> <div class="text-right col-xs-2">Email</div> <div class="text-left col-xs-3" id="email"></div> </div> <div class="row"> <div class="text-right col-xs-2">Dept:</div> <div class="text-left col-xs-3" id="departmentname"></div> <div class="text-left col-xs-2">Surname:</div> <div class="text-left col-xs-4"> <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" /> </div> </div> </div> </div> <div class="modal-footer"> <div class="panel-footer"> <input type="button" value="Find Employee" id="empbutton" /> <div class="col-xs-10" id="lblstatus"></div> </div> </div> </div> 

Take a look at the plnkr I created for you.