Question

当我使用带有动画速度转换的bootstrap popover时.flipBounceY在data-trigger = focus中没有完成工作所以当我第一次点击glyphicon时，当我重新点击popover时，popover会打开动画，它会重新打开... 我需要的是让这个popover仍然打开而不闪烁或重新打开..只是没有任何动作仍然打开，当我点击外面我希望它关闭 ...我使用了data-trigger =＆＃34;焦点＆＃34;当我点击外面时它让我关闭弹出窗口但是当我点击弹出窗口时它仍然重新打开请任何人帮助我。

<a  class="pointer-glyphicon" ><span   rel="popover" data-animation="false" style="float:right; margin-top:25px; color: #c8c8c8; " class="glyphicon glyphicon-info-sign "  tabindex="0" data-toggle="popover" data-trigger="focus" data-auto-close="false" title="Popover title" data-content="Default popover" data-placement="top"></span></a>
javascript:
 $('span[rel=popover]').popover().click(function(e) {
        e.preventDefault();  
        $(this).next().velocity('transition.flipBounceYIn');
    });

Answer 1

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap Modal and popover with Velocity.js animation</title>



    <link rel=stylesheet href="css/bootstrap.min.css">




  </head>

  <body>

          <a href="#myModal5"  data-toggle="modal">flipBounceYIn</a>


        <div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modal header 1</h4>
              </div>
              <div class="modal-body">
                <p>One fine body…</p>
              </div>
              <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
              </div>


        </div>
      </div>
      <div> </div>
  </div>
     <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<script src="js/index.js"></script>

  </body>
</html>

和index.js

$( ".modal" ).each(function(index) {
   $(this).on('show.bs.modal', function (e) { 
     $('.modal-dialog').velocity('transition.flipBounceYIn');


}); 
});

bootstrap popover animation velocity transition.flipBounceYIn，data-trigger = focus不能完美地工作

1 个答案:

和index.js