Bootstrap Modal close button issue after print action

Question

I am working on bootstrap modal. I had a set of gallery images. A modal popup is opened on clicking the image. The popup has two buttons one for print the modal content and second to close the modal.

The problem is when the user click print button every thing is ok and modal content will be printed, but when the user click in close button to close the modal after print the content nothing happen the modal doesn't closed. Please help me to fix this.

Here is my code

<div class="single-img">
    <div class="container">
        <h2 class="title"><span>title</span></h2>
        <div class= "container popup">
            <ul class="row list-inline">
                <li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
                    <div class="content">
                        <a href="#myGallery" data-slide-to="0">
                            <span class="btn-link">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </span>                         
                            <div class="img-wrap">
                                <img class="img-thumbnail" src="bluprnt3.png" alt="" />
                            </div>  
                        </a>
                    </div>
                </li>
                <li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
                    <div class="content">
                        <a href="#myGallery" data-slide-to="1">
                            <span class="btn-link">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </span>
                            <div class="img-wrap">
                                <img class="img-thumbnail" src="bluprnt4.png" alt="" />
                            </div>
                        </a>
                    </div>
                </li>
                <li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
                    <div class="content">
                        <a href="#myGallery" data-slide-to="2">
                            <span class="btn-link">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </span>
                            <div class="img-wrap">
                                <img class="img-thumbnail" src="bluprnt5.png" alt="" />
                            </div>
                        </a>
                    </div>
                </li>

            </ul>
            <!--begin modal window-->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">                      
                            <button type="button" class="close" data-dismiss="modal" title="Close" >X</button>
                        </div>
                        <div class="modal-body">
                        <!--CAROUSEL CODE GOES HERE-->

                            <!--begin carousel-->
                            <div id="myGallery" class="carousel slide clearafter" data-interval="false">
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="C.jpg" alt="item0">
                                    </div>
                                    <div class="item">
                                        <img src="D.jpg" alt="item1">

                                    </div>
                                    <div class="item">
                                        <img src="E.jpg" alt="item2">
                                    </div>

                                </div>
                            </div>
                                                        <div class="slider-bottom clearafter">
                                    <div class="modal-footer" style=" padding-left: 155px;">
                                        <button class="btn-sm" type="button" data-dismiss="modal" style="float:left;" onclick="printDiv('myGallery')">Print</button>
                                    </div>
                                    <div class="slider-control">
                                        <a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
                                            <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                        </a>
                                        <a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
                                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function printDiv(div) {   

  var printContents = document.getElementById(div).innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
}

</script>

Answer 1

try this

function printDiv(divName) {
    var elem = document.getElementById(divName)
    
    var domClone = elem.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

In my case Using bootstrap 4, using setTimeout helped me out. By using setTimeout function, we hide modal after clicking print button.

function printDiv(div) {   

 var printContents = document.getElementById(div).innerHTML;
 var originalContents = document.body.innerHTML;
 document.body.innerHTML = printContents;
 window.print();
 document.body.innerHTML = originalContents;
 setTimeout(function(){ $('#myModal').modal('hide'); }, 1000);
 }

Answer 3

//add this button to your main html

<button type="button"  class="btn btn-default" onclick="javascript:test()" id="myBtn" data-dismis`enter code here`s="modal">Close</button>

//add this script to your main html

function test() {
    $('#myModal').modal('toggle');
    } 

//add this style to your main html

.modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #000000;
    }