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

Posted 2023-03-15

【中文标题】在打印窗口中隐藏浮动面板[重复]

【英文标题】：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     
    .noPrintdisplay: none !important;

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

【参考方案1】：

@media print     
    .noPrintdisplay: none !important;

【讨论】：

我添加了代码，现在它正在显示部分标题。我在指令中添加了 header = false ，但它仍然不起作用。

@media print #indxPopupdisplay: none !important;

为了解决我使用 jsPanel ID 代替内容 ID 并且一切正常。 @media print #jsPaneldisplay: none !important; 。谢谢！