javascript - 打印模态内容后我的模态不会关闭

Question

打印模态主体后，我的模态不会关闭，但在打印内容后，创建按钮和打印按钮仍然有效谁能帮助我吗？

这是我的模态代码，其中包含要打印的数据

<div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  >
    <div class="modal-dialog" padding="5px !important">
                       <!--/id for printing "div1" -->
        <div class="modal-content" >

            <div class="modal-header">
                <strong>
                <h4 class="modal-title">Create New User</h4>
                </strong>
            </div>
            <div class="modal-body"id="div1">
                <form method="POST" action="../process/create_new_user.php">
                    <div class="form-group">
                        <label for="exampleInputName2" >User Name</label>
                        <input type="text" class="form-control" id="exampleInputName2" pattern="^[a-zA-Z ]+$" title="Letters Only" placeholder="Student Name" NAME="newusername" required>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" NAME="newuserpass" required>
                    </div>
                    <div class="checkbox text-right">
                        <label for="accounttype">Account Type</label>
                        <select name="securitylvl" id="accounttype" required>
                            <option value="" selected></option>
                            <option value="student">Student</option>
                            <option value="faculty">Faculty</option>
                            <option value="admin">Admin</option>
                            <option value="accounting">Accounting</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-sm" onclick="printContent('div1')">Print Content</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="Submit" class="btn btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

这是我用来打印内容的脚本

<script>
    function printContent(el){
      var restorepage = document.body.innerHTML;
      var printcontent = document.getElementById(el).innerHTML;
      document.body.innerHTML = printcontent;
      window.print();
      document.body.innerHTML = restorepage;
    }
    </script>

Answer 1

下面的代码只需克隆要打印的元素并将其放入 ID 名为 PrintSection 的新 div 中。请注意，您不必创建 id 为 PrintSection 的 div，因为 JS 代码旨在自动处理创建

新 div PrintSection 的 css

@media screen {
              #printSection {
                  display: none;
              }
            }

            @media print {
              body * {
                visibility:hidden;
              }
              #printSection, #printSection * {
                visibility:visible;
              }
              #printSection {
                position:absolute;
                left:0;
                top:0;
              }
            }

处理其他元素的克隆和隐藏的 Js

function printDiv(divName) {
    var elem = document.getElementById(divName)
    
    var domClone = divName.cloneNode(true);
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.style = "width: 100%;";
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}