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>

Do you get any java script errors? check your console. – this.girish May 19 '17 at 11:29 — this.girish, May 19 '17 at 11:29
No. There is no script errors – Jancy Abraham May 22 '17 at 08:37 — Jancy Abraham, May 22 '17 at 08:37
drigger modal hide with js or jquery will help – AamirSohailKmAs Jan 05 '22 at 10:24 — AamirSohailKmAs, Jan 05 '22 at 10:24

shebin c babu · Answer 1 · 2018-01-26T17:56:02.360

//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;
    }

score 1 · Answer 2 · 2022-01-10T18:24:01.547

1

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

edited Jan 10 '22 at 18:24

answered Jan 05 '22 at 09:04

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 05 '22 at 12:09
While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Jan 07 '22 at 12:32
@Luca Kiebel alright I'll try. – Jan 10 '22 at 18:12

score 0 · Answer 3 · answered Apr 27 '22 at 07:59

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

Bootstrap Modal close button issue after print action

3 Answers3