18

I have an anchor in a page called menu.html and I'm having trouble getting a Bootstrap modal to display data from another page called Lab6.html.

menu.html

<div class="collapse navbar-collapse navbar-exl-collapse"> <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="/Lab6.html#theModal" data-toggle="modal">Lab 6</a></li><!-- this one --> </ul> </div>

Lab6.html

<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> <script src="Scripts/jquery-2.1.4.min.js"></script> <script src="Scripts/bootstrap.min.js"></script>

Am I doing anything wrong?

Improve this question
3
  • Hello stranger! Please, post the whole code or create a demo in jsfiddle.net. Thanks!! Commented Oct 5, 2015 at 21:40
  • Hello, that is essentially all the code, the only thing I've placed in menu.html, is the anchor to the modal. The only thing I've left out was <link href="Content/bootstrap.css" rel="stylesheet" /> located in the </head> tag for Lab6.html Commented Oct 5, 2015 at 22:15
  • Here's an update for modal content in Bootstrap 4: stackoverflow.com/a/48934494/171456 Commented Feb 22, 2018 at 18:14

2 Answers 2

Reset to default
37

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hey thanks for the answer, however the modal code is located in lab6.html. I edited my question for better clarification.
@Buzinas - How can I access particular modal if I have multiple modals in Lab6.html?
Idea of using modal through anchor tag is not working at all.
This solution is worked fine with Bootstrap 3.But I am not able to launch modal by using above procedure.Can you please tell how to implement with Bootstrap 4?
@ZohaIrshad check my answer
23

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 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>

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.

Improve this answer

1 Comment

I am getting this error on trying your solution: [Error] TypeError: '$('#theModal').modal('show').find('.modal-content').load' is undefined). Any ideas?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.