Question

我正在研究bootstrap模态。我有一套画廊图片。单击图像时会打开模态弹出窗口。弹出窗口有两个按钮，一个用于打印模态内容，另一个用于关闭模态。

问题是当用户点击打印按钮时，每件事情都可以，并且会打印模态内容，但是当用户点击关闭按钮以在打印后关闭模态时，内容没有任何发生，模式也没有关闭。请帮我解决这个问题。

这是我的代码

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

打印操作后Bootstrap Modal关闭按钮问题

1 个答案: