打印操作后 Bootstrap Modal 關閉按鈕問題

Question

我正在研究引導模式。 我有一組畫廊圖片。 單擊圖像會打開模式彈出窗口。 彈出窗口有兩個按鈕，第一個用於打印模態內容，第二個用於關閉模態。

問題是當用戶單擊打印按鈕時一切正常，模態內容將被打印，但是當用戶在打印內容后單擊關閉按鈕關閉模態時沒有任何反應模態不會關閉。 請幫我解決這個問題。

這是我的代碼

<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

//將此按鈕添加到您的主html

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

//將此腳本添加到您的主html

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

//將此樣式添加到您的主要html

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

Answer 2

在我的情況下，使用 bootstrap 4，使用setTimeout幫助了我。

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

嘗試這個

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