1

I have enabled a modal pop up on clicking an image. The popup is showing a set of gallery images. The pop up has two buttons:one for close and other for print(to print the contents in pop up).

When the user clicks on the print button, the pop up content will be printed and print action is working fine.The issue is that, after clicking the print button and when user again clicks on the close button, the close button doesnot work.(Close button is working fine before clicking the print button)

I haven't added any custom js and there is no script errors in the console and referred the below link to display pop up http://alt-web.com/TUTORIALS/?id=bootstrap_modal_carousel_gallery

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>

closed as off-topic by Ben Crook, Keyul Shah, Qaisar Satti, liyakat, Moose May 25 '17 at 9:24

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about third-party modules are generally off-topic because the scope of functionality and code are not available. For more information, see this meta post/answer." – Ben Crook, Keyul Shah, Qaisar Satti, liyakat, Moose
If this question can be reworded to fit the rules in the help center, please edit the question.