如何打开模态Bootstrap

时间:2017-08-30 09:41:18

标签: angularjs

我是一个新的角度js。我正在使用模态并使用本教程http://getbootstrap.com/2.3.2/javascript.html#modals而且这段视频https://www.youtube.com/watch?v=7QIfjLqr1-4不幸地对我不起作用。这是我的代码:

    <div uib-dropdown keyboard-nav>
                <ul class="dropdown-menu positionFix" uib-dropdown-menu role="menu">
                    <li role="menuitem"><a href="#" data-toggle="modal"  data-target="#myModal">My account</a></li>
                    <li role="menuitem"><a href="#" ng-click="">Notification</a></li>
                    <li role="menuitem"><a href="javascript:void(0);"   ng-click="logout()">Sign out</a></li>
                </ul>


    </div>

    <div id="myModal" class="modal hide fade" 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-label="Close"><span aria-hidden="true">&times;</span></button>
                                          <h4 class="modal-title">Modal title</h4>
                                      </div>
                                      <div class="modal-body">
                                          <p>One fine body&hellip;</p>
                                      </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><!-- /.modal-content -->
                     </div><!-- /.modal-dialog -->
     </div><!-- /.modal -->

1 个答案:

答案 0 :(得分:0)

如果您计划将Angular.js与Bootstrap结合使用,我建议您使用UI Bootstrap

它涵盖了您需要的Angular.js和Bootstrap之间的大部分集成。他们甚至为启动Modals提供指令和服务。

请参阅Modal部分。