Question

我使用以下代码调用bootstrap模式

$scope.modalInstance = $modal.open({
                templateUrl: '/src/lvassets/owl/download/points.modal.php',
                size: 'm',
                controller: DownloadInstanceCtrl,
                windowClass: "hmodal-info",
                scope: $scope,
                backdrop: 'static',
                keyboard: false,
                resolve: {
                    params: function () {
                        var vars = {
                            'qty': $scope.qty,
                            'code': $scope.shortCode,
                            'offset': $scope.offset,
                            'status': $scope.status
                        };
                        return vars;
                    }
                }
            });

正如您所看到的，我已经设置了背景＆＃39;属于＆＃39;静态＆＃39;和键盘＆＃39;到＆＃39;假＆＃39;防止使用鼠标或“esc”关闭模态。键盘上的键。此模式显示进度条以及有关下载过程的一些详细信息，并且根据用户输入，可能需要几分钟才能关闭下载过程。所以我添加了一个按钮，用户可以选择在后台下载＆＃39;这将关闭模式。我使用了以下代码，

$(".inmodal").hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').hide();

一旦该过程在后台完成，我将重新打开模式屏幕，其中包含此代码的一些后续详细信息，

$(".inmodal").show();
$('body').addClass('modal-open');
$('.modal-backdrop').show();

上面的代码隐藏了模态并删除了“有色”字样。屏幕和用户，以便用户可以查看屏幕，滚动浏览并阅读详细信息但用户无法与屏幕交互，即他/她无法点击链接或按钮。

有没有办法解决这个问题？提前谢谢。

Answer 1

假设您应为您的网站使用jQuery，当最初打开引导模式时，它会将.modal-open类应用于<body>标记，这会禁用与任何内容的交互模态（见docs）。你只是使用jQuery的标准隐藏功能隐藏模态。您需要使用$('.inmodal').modal('hide');，以便模态显示的模态和所有其他功能返回到其原始状态。

隐藏bootstrap模式后无法与屏幕交互

1 个答案: