我正在使用 Bootstrap 模态窗口。我怎样才能使模态窗口可以用鼠标拖动,因为它保持静态?
<!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>
随着
jquery
您可以使用该功能draggable
,它允许您使用鼠标移动元素,对于您的模态示例 ,代码将是:有关更多文档,您可以访问https://jqueryui.com/draggable/。干杯
看看这个例子,它使用了你被告知的关于 jquery 可拖动的内容:http: //jsfiddle.net/raving/gL6zodx7/
干杯