我正在研究一个真正的项目,试图找到一种在父模态之外拖动引导子模态的方法。我能够做到的一种方法是将子模态移动到父级之外的另一个<div>
。我通过使用jQuery&#39; $()。detach()。appendTo()来做到这一点。是否可以在不移动子模态元素的情况下创建相同的行为?
这是一个简化示例和一个工作插件(http://plnkr.co/JwWJbZ3NR44xaCpoXZ3g?p)。
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Open Parent Modal
</button>
<div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header brown-color">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Parent Modal</h4>
</div>
<div class="modal-body light-brown-color">
<p>This is the parent body...</p>
<input type="text" placeholder="First Name..." />
<br />
<input type="text" placeholder="Last Name..." />
<br />
<input type="text" placeholder="Address..." />
<br />
<textarea rows="4" cols="50" placeholder="Write here..."></textarea>
<div>
<!-- Button trigger modal -->
<button type="button" id="childbutton" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal2">
Open Child Modal
</button>
<!--Adding child modal-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header brown-color">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Child Modal</h4>
</div>
<div class="modal-body ex-light-brown-color">
<p>This is the child body...There are different ways one can create the modals. This is called a static modal. </p>
<textarea rows="4" cols="50" placeholder="Write here..."></textarea>
</div>
<div class="modal-footer brown-color">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal fade -->
</div>
<!-- /.modal -->
<!--End of child modal-->
</div>
<div class="modal-footer brown-color">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal fade -->
</div>
<!-- /.modal -->
<!--Move child modal here. -->
<div id="testdiv"></div>
</body>
</html>
<script>
$(document).ready(function() {
$('.modal-dialog').draggable();
$('#myModal2').detach().appendTo('#testdiv');
});
</script>