如何讓我的模態可拖動和滾動？

-1

我是新來的JavaScript和其他框架，如角JS和引導。下面是我的代碼代碼，我希望我的模式窗口可拖動和滾動。我該怎麼做？任何幫助將不勝感激。如何讓我的模態可拖動和滾動？

我的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">&times;</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; 
      }); 
     }); 

     } 
    }; 
    });

來源

2015-06-30 Hanuman M

你有沒有使用'draggable'的bootstrap模態？ – gypsyCoder

試試這個：http://embed.plnkr.co/8CHoiN/preview – gypsyCoder

謝謝。我使用embed.plnkr.co/8CHoiN/preview鏈接來實現可拖動功能。 –

我跟着http://plnkr.co/edit/cu1TVKCY8ucYcT2AScJb?p=preview實現拖動funcationlity到模態窗口。下面的代碼顯示它是如何工作的。

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">&times;</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); 
    } 

    } 
};

}）;

謝謝。

來源

2015-07-01 20:27:00

如何讓我的模態可拖動和滾動？

回答

相關問題