Question

我使用了jquery UI对话框，如下图所示。

jquery UI dialog

当我单击打印按钮时，将打印对话框中div的内容。

打印功能代码

function printDiv() {
    var originalContents = document.body.innerHTML; 
    var printContents = document.getElementById('PrintDivcontent').innerHTML;
    document.body.innerHTML = "<html><head><title></title></head><body style='background-color:#FFFFFF;'>"
            + printContents + "</body>";
    window.print(); 
    document.body.innerHTML = originalContents;
}

打印功能正常。但是在通过单击“打印”按钮打印内容后，对话框的关闭按钮不起作用。当我在单击打印之前单击关闭按钮它将起作用。在控制台中显示以下错误

TypeError: $(...).data(...) is undefined
.data( widgetFullName )._focusTabbable();

有什么解决方法吗？请帮帮我。

已更新

HTML代码

<div id="ReportPopup">
            <div id="PrintDivcontent">

                <div id="ReportTablecontainer">
                    <table id="ReportTable"><tbody><tr><th>Time</th><th>Action</th><th>comment</th></tr><tr class=""><td style="text-align:center;width:25%">2014-06-05 13:50:03</td><td style="padding-left:5px;width:50%">cdfsdfsd</td><td style="text-align:center;width:25%"></td></tr><tr class="altRow"><td style="text-align:center;width:25%">2014-06-05 13:51:58</td><td style="padding-left:5px;width:50%">fsdfsd</td><td style="text-align:center;width:25%">dsfsd</td></tr><tr class=""><td style="text-align:center;width:25%">2014-06-05 13:52:01</td><td style="padding-left:5px;width:50%">dfsdfs</td><td style="text-align:center;width:25%">sfsdfs</td></tr><tr class="altRow"><td style="text-align:center;width:25%">2014-06-05 14:25:45</td><td style="padding-left:5px;width:50%">dsfsdfs</td><td style="text-align:center;width:25%">sdfsdfsd</td></tr><tr class=""><td style="text-align:center;width:25%">2014-06-05 14:42:10</td><td style="padding-left:5px;width:50%">sdfsdfsd</td><td style="text-align:center;width:25%">sdfsdfsd</td></tr></tbody></table>
                </div>
            </div>
            <div class="reportButtonContainer">

                <input type="button" onclick="printDiv()"  value="PRINT">
            </div>
        </div>

对话框

$("#ReportPopup").dialog({
            modal:true,
            resizable: false,
            title: 'Report',           
            show:  {
                effect      : 'fold'
            },
            hide:{
                effect : 'fold'
            },
            width: 650,
            height: 600 ,
            minHeight:"auto"
        });

Answer 1

我更改了我的代码以获取打印功能。

function printDiv() {  
      var divContents = $("#PrintDivcontent").html();
        var printWindow = window.open('', '', 'height=600,width=800');
        printWindow.document
                .write('<html><head><title>Title of Print Page</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write(divContents);

        printWindow.document.close();
        printWindow.print();
        printWindow.close();

    }

现在它运作正常。 DEMO

Jquery UI对话框关闭按钮不起作用

1 个答案: