在打印窗口中隐藏浮动面板

Question

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

代码HTML

itemprop

已创建的指令

<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()
    }],
};
})

现在只出现标题的边框

Answer 1

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