jQuery使用抽屉使div在右侧弹出，再点击任意处关闭，附angularjs模态框实现

HTML

    

         
        
             Log
        
         
        
             Log
        
    



    

        

            

                
Time
                
Name
                
Action
                
Object
            

            

                
                

                
            
        
    



    

        

            

                
Operation Log
                
            
            

                

                    

                        

                            
Time
                            
Name
                            
Action
                            
Object
                        

                        

                            
                                

                            
                        
                    
                
            
            

                Close
            
        
    

控制器js

$scope.getLogs = function () {
    $http({
        method: 'GET',
        url: '/api/v1/' + $scope.modules.snake + '/logs?pagenumber=1&pagesize=9999',
    }).then(function successCallback(response) {
        $scope.logList = response.data.resultSet;
    }, function errorCallback() {
        console.log('error');
    }).finally(function () {
    });
}

$scope.showDrawer = false;
    $scope.getDrawerStyle = function () {
        return {
            'position': 'fixed',
            'top': '0',
            'right': '-600px',
            'width': '600px',
            'height': '100%',
            'background-color': '#e2e2ff',
            'padding': '20px',
            'transition': 'right 0.4s ease',
            'z-index': '9999',
        }
    }

    $scope.openDrawer = function () {
        $scope.showDrawer = true;
        let $drawer = $("#drawer");
        $drawer.css("right", "0");
        $drawer.css("top", "65px");
    }

    // Click anywhere on the page to close the drawer
    $(document).on("click", function (event) {
        let $drawer = $("#drawer");
        if ($scope.showDrawer && !$(event.target).closest("#drawer").length && !$(event.target).closest("#drawerButton").length) {
            $scope.showDrawer = false;
            $drawer.css("right", "-600px");
        }
    });

特此记录。