我是javascript和其他框架（如angular JS和bootstrap）的新手。下面是我的代码，我希望我的模态窗口可以拖动和滚动。 我怎样才能做到这一点？任何帮助将不胜感激。
我的HTML文件如下所示：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="styles/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<script src="common/angularGrid.js"></script>
<link rel="stylesheet" type="text/css" href="common/angularGrid.css">
<link rel="stylesheet" type="text/css" href="common/theme-fresh.css">
<script src="js/blg.js"></script>
</head>
<body ng-app="blgRows" ng-controller="blgRowsCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top navbar-blue">
<div class="container">
<div class="navbar-header top-header">
<a class="top-button" href="#"> <i class="fa fa-eraser"></i> Reset</a>
<a class="top-button-selected" href={{blgUrl}} > <i class="fa fa-list-ol"></i> BLG</a>
<a class="top-button" href={{qrepUrl}} target=_blank> <i class="fa fa-download"></i> QREP</a>
<a class="top-button" href={{trialUrl}} target=_blank> <i class="fa fa-book"></i> Trial</a>
<a class="top-button" href={{tbpUrl}} target=_blank> <i class="fa fa-cogs"></i> TBP </a>
</div>
</div>
</nav>
<div style="margin-top: 50px; width: 100%; background-color: #DDDDDD;">
<div class="row grid-top">
<div class="col-md-4">{{data.desc}} </div>
<div class="col-md-1">
<a ng-click="trialSelectAll()">Select All</a>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-primary btn-xs" ng-click="trialCalRequest()">Apply Selected Posts To Trial</button>
</div>
</div>
<div style="height: 85%; width: 100%; box-sizing: border-box; ">
<div angular-grid="gridOptions" class="ag-fresh"></div>
</div>
</div>
<modal title="Calculation Stats" visible="showModal">
<div style="padding: 30px 20px 20px 20px; height: 55%; box-sizing: border-box;">
<ul><b>Accounts for calculation:</b> {{calcInfo.accounts}}</ul>
<ul>
<b>Range lines that were recalculated: </b>
<li ng-repeat="x in calcInfo.rangelines">
{{x.lineKey}} -> {{x.text}}
</li>
</ul>
<ul>
<b>Calc lines that were recalculated: </b>
<li ng-repeat="x in calcInfo.calclines">
{{x.lineKey}} -> {{x.text}}
</li>
</ul>
<ul><b>Total Time: {{calcInfo.calcTime}}</b></ul>
</div>
</modal>
</body>
我的js文件包含...
module.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content modal-huge">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true) {
$(element).modal('show');
} else {
$(element).modal('hide');
}
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
答案 0 :(得分：0)
我按照http://plnkr.co/edit/cu1TVKCY8ucYcT2AScJb?p=preview将可拖动的功能实现到模态窗口。 下面的代码显示了它是如何工作的。
module.directive('modal', function ($document) {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content modal-huge">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
var startX = 0,
startY = 0,
x = 0,
y = 0;
element.css({
position: 'fixed',
cursor: 'move'
});
scope.$watch(attrs.visible, function(value){
if(value == true) {
$(element).modal('show');
} else {
$(element).modal('hide');
}
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
$(element).on('mousedown', function (event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
//$(element).on('mousemove', mousemove);
//$(element).on('mouseup', mouseup);
});
function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
//element.css({
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
//$(element).unbind('mousemove', mousemove);
//$(element).unbind('mouseup', mouseup);
}
}
};
}）;
谢谢。