Problema Bootstrap Modal Jquery

[pedroparra]

Hola compañeros. Tengo un problema con un panel de administracion que estoy programando. Lo que quiero hacer es que al pulsar un boton eliminar, apareca una ventana modal para confirmar la eliminacion del registro. Funciona perfecto en mi navegador pero no en mi iphone ni en ningun dispositivo movil, ya que se queda como piyado. Se que no es fallo bootstrap ya que probando otras web que lo utilizan , funciona correctamente asi que no se que es lo que estoy haciendo mal. Les dejo el codigo y les pido su ayuda para resolver este misterio . (Por cierto estoy utilizando bootstrap responsive !)

Este es el codigo del formulario:

Código HTML:

<form class="well" action='bajaproducto.php' method='POST'>
   <table>
    <tr>
	<td><button class="btn" id="85"><i class="icon-remove"></i></button></td>
	<td>Producto 1</td>
    </tr>
    </table>
	<input id='borrarid' type='hidden' name='borrarid' value=''>
</form> 

Este es el codigo de la ventana modal

Código HTML:

<div class="modal hide fade" id="mymodal">
        <div class="modal-header">
          <h3>Mensaje</h3>
        </div>

        <div class="modal-body">Desea realmente eliminar el producto seleccionado?</div>

        <div class="modal-footer">
          <a href="#" class="btn" type="reset" onclick="closeDialog ();">Cancelar</a>
          <a href="#" class="btn btn-danger" onclick="okClicked ();">Eliminar</a>
        </div>
</div> 

Y por ultimo el javascrip:

Código:

<script>
  $('.controls button').click(function (e) {
    e.preventDefault();
    var mivalor = $(this).attr("id");
    $('#borrarid').val(mivalor);
    $('#mymodal').modal('show' , function() {} );
  });

  function closeDialog () { 
    $('.controls button').removeClass('active');
    $('#mymodal').modal('hide'); 
  };
  function okClicked () { 
    $('.well').submit(); 
    closeDialog (); 
  };
</script>

Gracias de antemano por la ayuda!!