jquery - How to temporarily stop the scroll event while dragging the uibmodal in mozilla? -
here directive using solution here - how can apply draggable directive bootstrap modal using angularjs?
modal:
$uibmodal.open({ templateurl: 'app/views/signs.html', controller: function ($scope, $uibmodalinstance, urls){ $scope.urls = urls; $scope.close = function(){ $uibmodalinstance.dismiss('cancel'); }; }, windowclass: 'windowclasscss', backdrop: 'true', resolve: { urls: function () { return home.getus(); }, signgroup: function(){ return home.getg(); }, } }); angular.module('myapp').directive('draggable', function ($document) { "use strict"; return function (scope, element) { var startx = 0, starty = 0, x = 0, y = 0; element= angular.element(document.getelementsbyclassname("modal-dialog")); 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); }); function mousemove(event) { y = event.screeny - starty; x = event.screenx - startx; element.css({ top: y + 'px', left: x + 'px' }); } function mouseup() { $document.unbind('mousemove', mousemove); $document.unbind('mouseup', mouseup); } }; }); and modal html -
<div id="signsmodal" draggable="true"> <div class="modal-header"> <h4 class="modal-title">title</h4> </div> <div class="col-md-12 row no-select gallery"> <div ng-repeat="url in types"> <div class= "gallery-item col-md-3"> <img class="galleryimg no-select" ng-src="{{url.img}}"> </div> </div> </div> </div> css:
.modal-backdrop.in { display: none; } div.windowclasscss .modal-content { overflow: auto; width: 100%; max-width: 100%; height : 15vh; } div.windowclasscss .modal-dialog { overflow: scroll; position: relative; cursor: move; margin-right: 0px; width: max-content; background-color: grey; } div.windowclasscss .modal-content { overflow: auto; width: max-content; max-width: 100%; height : 35vh; } div.windowclasscss .gallery-item { height: 25vh; border: 1px transparent; } div.windowclasscss .gallery-img-review-modal { height: 100%; width: 100%; display : block; object-fit: contain; margin-left: auto; margin-right: auto; border: 2px solid red; } this worked me in sense able drag modal.
i have issue in mozilla though - modal has scrollbar , when move scrollbar , down, modal starts getting dragged instead of scrollbar scrolling modal , down. scrollbar works when click on , down arrow.
how can deactivate modal drag movement on scrollbar in modal?
Comments
Post a Comment