How to close Bootstrap modal only when user clicks on close image?

You can define your modal behavior, defining data-keyboard and data-backdrop.

 <div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

When you launch your modal you can pass the options:

{
  keyboard: false,
  backdrop: 'static'
}

which will disable closing the modal by clicking the backdrop, and the escape-button. Or they can be set as data-attributes.

Try this one

<div id="myModal" class="modal hide fade in" data-backdrop="static">
<div> </div>
</div>

The best way to make it in Jquery is :

<script type="text/javascript">
    $('#modal-id').modal({
        backdrop: 'static',
        keyboard: false
    });
</script>

OR in HTML:

<div id="modal-id" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

But, if you already have initialized the modal you need unbind the click event of your modal like this for example:

<script type="text/javascript">
    //this remove the close button on top if you need
    $('#modal-id').find('.close').remove();
    //this unbind the event click on the shadow zone
    $('#modal-id').unbind('click');
</script>