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

Question

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

我的代码是这样的:

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