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

HTML

<div class="ms-auto">
    <div class="btn-group">
        <!-- 1.抽屉 --> 
        <button id="drawerButton" ng-click="getLogs();openDrawer()">
             Log
        </button>
        <!-- 2.Modal 模态框--> 
        <button ng-click="getLogs();" data-bs-target="#logModal" data-bs-toggle="modal">
             Log
        </button>
    </div>
</div>

<div id="drawer" ng-show="showDrawer" ng-style="getDrawerStyle()">
    <div class="table-responsive row">
        <table class="table">
            <thead class="header-item">
                <th style="width: 20%">Time</th>
                <th style="width: 20%">Name</th>
                <th style="width: 30%">Action</th>
                <th style="width: 30%">Object</th>
            </thead>

            <tbody>
                <!-- start row -->
                <tr></tr>
                <!-- end row -->
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="logModal" role="dialog" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-primary text-white">
                <h4 class="modal-title">Operation Log</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive row">
                    <table class="table">
                        <thead class="header-item">
                            <th style="width: 20%">Time</th>
                            <th style="width: 20%">Name</th>
                            <th style="width: 30%">Action</th>
                            <th style="width: 30%">Object</th>
                        </thead>

                        <tbody>
                            <!-- start row -->
                                <tr></tr>
                            <!-- end row -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-dark" type="button" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

控制器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");
        }
    });

特此记录。