bootstrap modal issue while clicking - bootstrap-modal

Question

sample.html: In this page I had a button as below as
<button data-toggle="modal" class="btn btn-info" onclick="location.href='home.html'" data-target="#testModal">button</button>
on click on the above button open a modal named home.cfm and its content as below as
home.html:
<div id="testModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
but no modal is opening.please help

Answer 1

You have to just need to call a modal-contant data from the home.html file , so put below code in to your sample.html file.
<button class="btn btn-info" onclick="show_modal('home.html','Home page','')">button</button>
<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog animated bounceIn">
<div class="modal-content">
</div>
</div>
</div>
Add one function in to the js file and add reference of that js file in to the sample.html.
function show_modal(target, title, size) {
jQuery('#modal').removeData('bs.modal');
jQuery('.modal-content').html('');
jQuery('.modal-dialog').removeClass('modal-lg');
jQuery('#modal').removeClass('create_event_task');
jQuery('.modal-dialog').addClass(size);
var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title;
jQuery('#modal').modal({remote: encodeURI(newTarget)});
}
Add below code in home.html file.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I hope this will help full to you.