Drag Bootstrap modal window with the mouse

Navigation
0

I'm using a Bootstrap modal window. How can I make the modal window drag with the mouse because it stays static? 

<!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>
    
asked by Drago25 02.04.2016 в 00:21
source

2 answers

1

With jquery you can use the function draggable , it allows you to move elements using the mouse, for your modal example the code would be: 

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

For more documentation you can view link . Greetings

    
answered by 02.04.2016 / 01:34
source
2

Check this example where it uses what you have been told about the jquery's draggable: link

Greetings

    
answered by 02.04.2016 в 01:38
Android Studio and Bitbucket why is the CSS style not inherited when it is called in 2 different HTML files?