ブートストラップ印刷終了後のモーダルクローズボタンの問題

Question

私はブートストラップモーダルに取り組んでいます。私はギャラリー画像を持っていました。画像をクリックするとモーダルポップアップが開きます。ポップアップには、モーダルコンテンツを印刷するための2つのボタンと、モーダルを閉じるための2つのボタンがあります。

問題は、すべてのものがOKでモーダルコンテンツが印刷されますが、ユーザーが閉じるボタンをクリックして印刷した後にモーダルを閉じると、モーダルが閉じないという問題があります。これを解決するために私を助けてください。ここで

が私のコードである

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