bootstrap modal issue while clicking

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">&times;</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">&times;</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.