Bootstrap与angularjs的模态框

来源：互联网发布：渥瑞达unity3d培训编辑：程序博客网时间：2024/06/08 20:15
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <script >        angular.module("myApp",[]).controller("myControl",["$scope",function($scope){            $scope.fun = function(){                $('#basic').modal('show');            }            $('#basic').on('hidden.bs.modal', function () { //模态框取消时触发的事件                // 执行一些动作...                alert("sadsfsdfds");            })        }]);    </script></head><body ng-app="myApp" ng-controller="myControl">    <div  class="modal fade" id="basic" tabindex="-1" role="basic" 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" id="title">                        模态框的标题                    </h4>                </div>                <div class="modal-body">                    文本内容                </div>                <div class="modal-footer">                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                    <button type="button" class="btn btn-primary">提交更改</button>                </div>            </div>        </div>    </div>    <!--        两种方式去调用模态框    -->    <button type="button" ng-click="fun()">模态框</button>    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basic">        开始演示模态框    </button><!--data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。您可以在页面上创建多个在不同时间进行加载。--></body></html>
阅读全文
0 0