Question

我的引导程序模版上有一个printModal和closeModal按钮。运行打印逻辑后，模态不会关闭。

步骤1：：加载弹出窗口后，单击printModal。（工作良好）。 第2步：关闭浏览器打印对话框（工作正常，打印对话框关闭并且引导模式仍然可见）。 步骤3：单击closeModal（失败，模式不会关闭）。

如果在单击printModal之前先单击closeModal，则效果很好。只有先执行printModal之后，它才起作用。

<div id="myModal" class="modal fade" role="dialog">
<div id="modalContent" class="modal-dialog modal-lg">
    <div class="modal-content">
    // more html


        <div class"buttons">
            <input type="submit" id="printButton" class="btn-lg" value="Print">
            <input type="submit" id="closeButton" class="btn-lg" data-dismiss="modal" value="Close">
        </div>
    </div>

    <script>
        $('#myModal').on('click', 'input#printButton', function () {

            var myCopy = document.body.innerHTML;
            var printThis = document.getElementById("modalContent").innerHTML;
            document.body.innerHTML = printThis;

            window.print();

            document.body.innerHTML = myCopy;

        });
    </script>
</div>

Answer 1

这是因为您使用此代码更改了页面的整个HTML代码以及整个DOM：

document.body.innerHTML = printThis;

绑定到DOM元素的javascript函数现在消失了，关闭按钮上的click事件也消失了。

您可以做的是更改css以进行打印，以便仅显示模态内容。

或者，您可以打开一个弹出窗口，在其中添加模态内容，然后打印并随后将其关闭。带有弹出窗口的示例：

var printPopup = window.open('');
printPopup.document.write(printThis);
printPopup.document.write(/ add some css or include a css file/);
printPopup.print();

请注意，弹出窗口不利于用户体验，因此应首先尝试修改CSS的方法。

Answer 2

尝试将input更改为button，如图here所示。

所以它看起来像这样：

<div class"buttons">
   <input type="submit" id="printButton" class="btn-lg" value="Print">
   <button id="closeButton" class="btn-lg" data-dismiss="modal">Close</button>
</div>

重置HTML正文后，Bootstrap模式没有关闭

2 个答案: