在打印窗口中隐藏浮动面板[重复]答案

【问题标题】：Hide Floating panel in print window [duplicate]在打印窗口中隐藏浮动面板[重复]
【发布时间】：2018-11-29 23:51:14
【问题描述】：

我正在开发一个浮动面板，它必须完全隐藏在打印屏幕上。我使用 JSPanel3。我希望整个面板仅在显示打印屏幕期间隐藏。

代码 HTML

<div style="position: absolute; top: 30px; left: 20px" id="indxPopup">
    <div class="noPrint" id="hcontent" style="padding-right: 10px; padding-top: 10px">
        <one-gedfile-form layout="gedfile.TEMATICA.LAYOUT" mode="mode" gedfile-form-control="formControl" show-form-border="false"></one-gedfile-form>
    </div>
    <div floating-panel ctrl="closePanelForm" id="jsPanel" minimize="remove" close="remove" maximize="remove" parent-tag="indxPopup" html-tag="hcontent"></div>
</div>

创建的指令

oneApp.directive('floatingPanel', function () {
   return {
       restrict: 'A',
       scope: {
        id:'@',
        parentTag: '@',
        title: '@',
        content: '@',
        close: '@',
        maximize: '@',
        htmlTag:'@',
        minimize: '@',
        ctrl: "=",
    },
    controller: ['$scope', function($scope) {
        var config =
        {
            id: $scope.id,
            headerTitle: $scope.title == undefined ? '' : $scope.title,
            position: "center",
            size: { width: 350, height: 250 },
            content: $scope.htmlTag == undefined ? $scope.content : $('#'+ $scope.htmlTag),
            theme: 'rgb(192, 192, 192)',
            headerControls: {
                close: $scope.close,
                maximize: $scope.maximize,
                minimize: $scope.minimize
            },
        };

        var size, position;

        if ($scope.parentTag != undefined) {
            var element = $('#' + $scope.parentTag);
            var pos = element.offset();
            config.size = { width: element.width(), height: element.height() };
            config.position = { top: pos.top, left: pos.left }

        }

        var panel1 = $.jsPanel({

            config
        });

        var closePanel = function() {

            panel1.close();
        }

        var onCreate = function() {

            if ($scope.ctrl) {

                $scope.ctrl.closePanel = closePanel;
            }
        };

        onCreate()
    }],
};
})

结果

编辑

我添加了代码

@media print {    
    .noPrint{display: none !important;}
}

现在它只出现在标题的边框

【问题讨论】：

标签： angularjs html

【解决方案1】：

@media print {    
    .noPrint{display: none !important;}
}

【讨论】：

我添加了代码，现在它正在显示部分标题。我在指令中添加了 header = false ，但它仍然不起作用。
@media print { #indxPopup{display: none !important;} }
为了解决我使用 jsPanel ID 代替内容 ID 并且一切正常。 @media print { #jsPanel{display: none !important;} }。谢谢！