Geek Answers Handbook

Getting modal Bootstrap content from another page

I have a binding on a page called menu.html , and I'm having trouble getting Bootstrap modality to display data from another page named 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 something wrong?

+6
source share
1 answer

Update

The way you are trying to get modal content from another page is wrong.

According to the download documentation :

If a remote URL is provided, the content will be loaded once through jQuery and injected into the .modal-content div. If you are using data-api, you can also use the href attribute to indicate 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 the same as 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 should be inside your menu.html page. For instance:

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

Finally, your Lab6.html will only have code that was inside .modal-content . For instance:

 <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 you created .

+23
source

More articles:


All Articles