angular中的悬浮提示框和模态框 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../lib/angular-1.7.0/angular.min.js"></script>
    <style>
        .box{
            margin:100px auto;
            width: 80px;
            text-align: center;
        }
        .box img{
            display: block;
            position:relative;
            left:50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            cursor: pointer
        }
    </style>
</head>
<body ng-app="myApp">
    <div class="container" ng-controller="myCtrl">
        <div class="box" data-toggle="modal" data-target="#myModal">
            <img src="../img/computer.png" alt="" title="Popover title"
                 data-container="body" data-toggle="popover" data-placement="top"
                 data-content="顶部的 Popover 中的一些内容" data-animation="true" data-trigger="hover" ng-init="InitPopover()">
            <span>hadoops</span>
        </div>

        <!-- 模态框（Modal） -->
        <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"
                                aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题
                        </h4>
                    </div>
                    <div class="modal-body">
                        按下 ESC 按钮退出。
                    </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><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="box">
            <img src="../img/computer.png" alt="" title="Popover title"
                 data-container="body" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip" ng-init="InitTooltip()" ng-click="openNew()">
            <span>2282919374</span>
        </div>
    </div>
    <script>
        var app=angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            //angular中初始化tooltips提示控件
            $scope.InitTooltip = function () {
                $("[data-toggle='tooltip']").tooltip();
            };

            //angular中初始化popover提示控件
            $scope.InitPopover = function () {
                $("[data-toggle='popover']").popover();
            };

            $scope.openNew=function(){
                window.open('http://www.baidu.com','_blank', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no','false')
            }
        });
    </script>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../lib/angular-1.7.0/angular.min.js"></script>
    <style>
.box{
            margin:100px auto;
width: 80px;
text-align: center;
}
        .box img{
            display: block;
position:relative;
left:50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
cursor: pointer
}
    </style>
</head>
<body ng-app="myApp">
    <div class="container" ng-controller="myCtrl">
        <div class="box" data-toggle="modal" data-target="#myModal">
            <img src="../img/computer.png" alt="" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容" data-animation="true" data-trigger="hover" ng-init="InitPopover()">
            <span>hadoops</span>
        </div>

<!-- 模态框（Modal） -->
<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"
aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
                    </div>
                    <div class="modal-body">
按下 ESC 按钮退出。
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="box">
            <img src="../img/computer.png" alt="" title="Popover title"
data-container="body" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip" ng-init="InitTooltip()" ng-click="openNew()">
            <span>2282919374</span>
        </div>
    </div>
    <script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
            //angular中初始化tooltips提示控件
$scope.InitTooltip = function () {
                $("[data-toggle='tooltip']").tooltip();
};

//angular中初始化popover提示控件
$scope.InitPopover = function () {
                $("[data-toggle='popover']").popover();
};

$scope.openNew=function(){
                window.open('http://www.baidu.com','_blank', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no','false')
            }
        });
</script>
</body>
</html>
posted @ 2020-08-12 16:17  sct春天  阅读(793)  评论(0)    收藏  举报