Question

我目前遇到了问题。一旦我点击当前模态中的链接，我需要打开另一个模态。我尝试在data-dismiss="modal"内的超链接上添加data-content，但没有运气，我被卡住了。我也是非常非常新的引导程序。我刚开始上周。

我的代码是这样的：

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

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

1 个答案: