Bootstrap，单击数据内容内部链接的模态，一旦单击关闭当前模态并显示另一个模态？

Question

我目前有问题。 单击当前模态内的链接后，我需要打开另一个模态。 我尝试在data-dismiss="modal" data-content内的超链接上添加data-dismiss="modal" ，但没有运气，我被卡住了。 我也很陌生。 我上周刚开始。

我的代码是这样的：

<a href="" data-target="#modal1" data-toggle="modal">
    <img src="logos/tools.png" class="pop text-center" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<h3>aaa</h3> 
    <a href="#" data-target="#modal2" class="pop" data-toggle="modal" data-dismiss ="modal"> asd </a>' data-original-title="" title="" ">
<h3>xxx</h3>
</a>

<div tabindex="-1" class="modal fade" id="modalscd" role="dialog" aria-hidden="true" aria-labelledby="modalscd">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
        <h4 class="modal-title" id="proddevtools"><h4>Source Code Deployment</h4>
      </div>
      <div class="modal-body">
        <p>Content</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

js脚本

<script type="text/javascript">
    $("[data-toggle=popover]").popover({
        html: true
    }) 
</script>

<script type="text/javascript">
    $(".pop").popover({
        trigger: "manual",
        html: true,
        animation: false
    })
    .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");

        $(".popover").on("mouseleave", function() {
            $(_this).popover('hide');
        });
    })
   .on("mouseleave", function() {
        var _this = this;
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 30);
    }); 
</script>

Answer 1

 $('#myModal-1').on('hide.bs.modal', function (event) { $('#myModal-2').modal('show'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-1"> Open modal 1 </button> <!-- Modal --> <div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> Modal 1 content, click <a href="#" data-dismiss="modal">Here</a> to close it </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal 2 --> <div class="modal fade" id="myModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> Modal 2 content </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>