Problems:

1. Need to load remote content
2. Need to display a loading indicator
3. Need to ensure each time modal display, it’s request new modal body content

Following are the solutions, however…

I’m looking for solutions using event handler instead of using a timer, .change() in jQuery does not monitor the html value change.

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Details  <img src="/img/loading-tiny.gif" alt="loading..." id="modal-loading" class="hidden"></h3>
  </div>
  <div id="modal-body" class="modal-body"></div>
  <div class="modal-footer"></div>
</div>

<a onclick="viewRemoteModal()">View Modal</a>

var t; // a timer variable
function viewRemoteModal() {
    $('#myModal .modal-body').removeData(); // clean up modal body content
    $('#modal-loading').removeClass('hidden'); // display the loading icon
    t = setInterval(function(){
        // check if modal body is not empty, hide loading icon
        // time interval of 500ms to check the modal body content
        if($('#myModal .modal-body').html() != '')
        {
            $('#modal-loading').addClass('hidden');
            window.clearInterval(t);
        }
    },500);
    // open up modal using remote option
    $('#myModal').modal({
        'remote': 'http://www.google.com.my',
        'show': true
    });
}