Getting Bootstrap's modal content from another page
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.
Note that if you are using Bootstrap 4, the accepted answer does not work, because according to Bootstrap's docs about the remote
option:
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
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 thehref
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>
To make it work, first remove the data-target
and data-toggle
attributes from the link. You can leave the href
attribute there.
<li><a href="Lab6.html" class='li-modal'>Lab 6</a></li>
Using jQuery we can add a click listener to the <a>
element, but we do not want to directly go to the page indicated by the href
attribute so we use preventDefault()
. By simply using jQuery's load method we can load the content of the lab6.html
page into modal-content
.
$('.li-modal').on('click', function(e){
e.preventDefault();
$('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
});
Full example here.