1

Estoy usando una ventana modal de Bootstrap ¿Cómo puedo hacer para que se pueda arrastrar con el mouse la ventana modal ya que se queda estática?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="Modal Window ">
  <link href="bootstrap.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h2>Modals con Twitter Bootstrap</h2>
    <div id="example" class="modal hide fade in" style="display: none; ">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Cabecera de la ventana</h3>
      </div>
      <div class="modal-body">
        <h4>Texto de la ventana</h4>
        <p>Mas texto en la ventana.</p>
      </div>
      <div class="modal-footer">
        <a href="index.html" class="btn btn-success">Guardar</a>
        <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
      </div>
    </div>
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Abrir</a>
    </p>
    <script src="jquery.js"></script>
    <script src="bootstrap-modal.js"></script>
</body>

</html>

5
  • Hola estimado, que deseas mover ?? el dialogo que no este centrado o arrastrar el modal con el mouse ? Proba con esto $("#myModal").draggable({ handle: ".modal-header" });
    – Santi92
    el 1 abr. 2016 a las 23:28
  • @Santi92 hola brother lo que deseo hacer es arrastrar la ventana con el mouse efectivamente, ¿Hay alguna forma de hacerlo por que no he podido y no hay casi informacion?
    – Drago25
    el 1 abr. 2016 a las 23:29
  • te sirvio la respuesta ?
    – Santi92
    el 2 abr. 2016 a las 14:45
  • @Santi92 si amigo funcionó gracias por la ayuda, no m funcionaba por que me faltaba una libreria de jquery :::: <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/…>
    – Drago25
    el 4 abr. 2016 a las 14:35
  • 1
    Ahh perfecto, cualquier otra consulta , no dudes en formular otra pregunta en SOes. Saludos
    – Santi92
    el 4 abr. 2016 a las 15:20

2 respuestas 2

3

Con jquery puedes usar la función draggable, la misma permite mover elementos utilizando el mouse, para tu modal example el código sería:

$("#example").draggable({
    handle: ".modal-header"
}); 

Para más documentación puedes visiar https://jqueryui.com/draggable/. Saludos

2

Revisa este ejemplo donde usa lo que te han comentado del draggable de jquery: http://jsfiddle.net/raving/gL6zodx7/

Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.