My modal wont close after I print the modal content

Question

My modal wont close after I print the modal body but the create button and print button still works after I print content still can anyone help me?

here is my modal code that contains the data to be printed

<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>

here is my script I use to print the content

<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

The code below simply clone the element you want to print and drop it inside a new div with ID called PrintSection. Note its not necessary for you to create a div with id of PrintSection as the JS code is design to handle the create authomatically

css for the new div PrintSection

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

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

Js to handle the cloning and hiding of other elements

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();
}

Answer 2

I know this is a year plus old but in the script function instead of

document.body.innerHTML = restorepage;

try

location.reload(true);