• angularjs 简易模态框


    angularjs 简易模态框

    angularjs 中的模态框一般使用插件angular-ui-bootstrap书写。

    这里记录一种简易的模态框写法:

    1.警告消息框alert:

    原理:

    在html页面放入模态框样式代码,然后在控制器里面写下控制代码。

    代码:

    HTML页面:(写在view页面的最后)

    <div class="modals" ng-show="modalstext" ng-style="modleheightmax">
        <div >
            <p>{{modalstext}}</p>
            <button ng-click="modalstext=false">确定</button>
        </div>
    </div>

    css:

    .modals{ 100%;background: rgba(0,0,0,0.5);position:absolute;top:0;}
    .modals>div{overflow:hidden; 400px;height: 250px;border:2px solid #fff;margin: auto auto;border-radius: 10px;
           background: url("../img/listback.png");background-size: 100% 100%;} .modals>div>p{font-size: 20px;color: #fff;height: 78px;margin:55px 60px;word-break:break-all;overflow: hidden} .modals>div>button{ 150px;margin:0 auto;display: block;}

    控制器:(写在控制器的最开始)

    /*获取页面高度*/
    $scope.heightmax = $window.innerHeight;
    /*加载模态框高度*/
    $scope.modleheightmax = {"height":$scope.heightmax-404+"px","padding-top":($scope.heightmax-200)/2+"px"};
    

    弹出文本:(在之前写alert中的地方加入)

    $scope.modalstext = "请输入验证码!";
    

    2.确认消息框confirm 

    HTML页面:(写在view页面的最后)

    <div class="modals" ng-show="modalsonoff" ng-style="modleheightmax">
        <div >
            <p>{{modalsonoff}}</p>
            <div class="modalsonoff">
                <button ng-click="modalson();modalsonoff=false;">确定</button>
                <button ng-click="modalsonoff=false">取消</button>
            </div>
    
        </div>
    </div>
    

    css:除了和警告消息框alert中共用的的css外还需加上下面的部分,用来控制按钮样式。

    .modals>div>.modalsonoff{margin:0 auto; 324px;}
    .modals>div>.modalsonoff>button{float: left;margin: 0 5px; 150px;}
    

    控制器:(和警告消息框alert中相同)

    弹出文本:(在之前写alert中的地方加入)

    $scope.modalsonoff ="您确定提交答案么?";
    $scope.modalson=function (){/*在此处写确定后的处理函数*/}

      

  • 相关阅读:
    Liferay 6.2 改造系列之十五:修改默认可用语言
    Liferay 6.2 改造系列之十七:当Portlet无权限时,不显示错误信息
    Liferay 6.2 改造系列之十四:修改组织的表单内容
    Liferay 6.2 改造系列之十三:修改用户编辑页面表单内容
    Liferay 6.2 改造系列之十一:默认关闭CDN动态资源
    matlab向量的排序(自写函数)
    matlab求一个矩阵中各元素出现的个数(归一化)
    matlab求矩阵的鞍点
    matlab求矩阵、向量的模
    matlab求最大公约数和最小公倍数
  • 原文地址:https://www.cnblogs.com/s313139232/p/7995133.html
Copyright © 2020-2023  润新知