Bootstrap动画模式" rotateInDownRight"不工作为什么?

时间:2014-12-14 04:44:51

标签: javascript jquery asp.net twitter-bootstrap twitter-bootstrap-2

1.html head包含所有css文件 2.body form tag添加了按钮控件 3.体型定义的模态框,带淡入淡出 4.包括bootstrap jquery

普通模态正在工作(启动演示模态),但“动画模态”按钮无法正常工作

! - begin snippet:js hide:false - >

<!DOCTYPE html>
<html lang="en">

<head runat="server">
  <link href="dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet">
  <link href="dist/css/animate.min.css" rel="stylesheet">
</head>

<body>
  <form id="form1" runat="server">
    <div class="container">
      <h1>Hello, world!</h1>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>

      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal16">
        Animation modal
      </button>


        <div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

      <div id="myModal16" class="modal hide" data-easein="rotateInDownRight" data-easeout="rotateOutDownRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel1">Modal header 2</h3>
        </div>
        <div class="modal-body">
          <p>One fine body…</p>
        </div>
        <div class="modal-footer">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
          <button class="btn btn-primary">Save changes</button>
        </div>
      </div>
      <script src="Scripts/jquery-2.1.1.min.js"></script>
      <script src="dist/js/bootstrap.min.js"></script>
    </div>
  </form>
</body>

</html>

0 个答案:

没有答案