时间戳

首页 > 解决方案 > 重置 HTML 正文后引导模式不会关闭

javascript - 重置 HTML 正文后引导模式不会关闭

问题描述

我的引导模式上有一个 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>

标签： javascriptjqueryhtmlbootstrap-4bootstrap-modal

解决方案

这是因为您使用以下代码更改了页面的整个 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 修改方法。

推荐阅读