zoukankan      html  css  js  c++  java
  • 自定义ionic弹出框

    <img width="64" height="64" src="img/timg.jpg" style="border-radius:10px;margin-top:20px;border:1px solid rgba(255,255,255,.3)" id="imgUp" ng-click="openPuctureStyle()" ng-if="showDefaultFace">
    <img width="64" height="64" ng-src="{{BD.user.img}}" style="border-radius:10px;margin-top:20px;border:1px solid rgba(255,255,255,.3)" id="imgUp" ng-click="openPuctureStyle()" ng-if="!showDefaultFace">

    $ionicModal.fromTemplateUrl('picture.html', {
    scope: $scope,
    animation: 'slide-in-up',
    backdropClickToClose: true
    }).then(function (modal) {
    $scope.picture = modal;
    });
    $scope.openPuctureStyle = function () {
    $scope.picture.show();
    };
    $scope.closePuctureStyle = function () {
    $scope.picture.hide();
    };

    <script id="picture.html" type="text/ng-template">
    <ion-modal-view id="openmodel" class="stable-bg" style="height:220px;position:absolute;bottom:20px">
    <ion-header-bar style="background-color:#222;z-index:100;border-bottom:1px solid rgba(0,0,0,.25);">
    <h5 class="title" style="color:white;">操作</h1>
    </ion-header-bar>
    <ion-content scroll="true" style="background-color:#1f1f26";>
    <div class="list borderdown" style="background-color:#1f1f26;margin-bottom:0"; ng-click="closePuctureStyle()">
    <button class="light button-clear" style="padding:20px;margin:0px" ng-click="photo()">拍照</button>
    </div>
    <div class="list borderdown" style="background-color:#1f1f26"; ng-click="closePuctureStyle()">
    <button class="light button-clear" style="padding:20px;margin:0px" ng-click="album()">从相册中选择</button>
    </div>
    </ion-content>
    <a class="button " style="background-color:#222;color:white;100%;position: fixed;bottom: 0px;left:0px" z-index:1000; ng-click="picture.hide()" style="100%">取消</a>
    </ion-modal-view>
    </script>

  • 相关阅读:
    立 Flag
    ASP.NET Core 3.0 一个 jwt 的轻量角色/用户、单个API控制的授权认证库
    C# Xamarin 数据绑定入门基础
    C# HttpClient 请求认证、数据传输笔记
    【PHP篇】输出方法
    【PHP篇】变量与常量
    C语言小笔记
    树莓派GPIO口的使用
    树莓派连接不上WiFi
    OLED屏幕详细使用(CC2530 & 51)
  • 原文地址:https://www.cnblogs.com/xfcao/p/6438215.html
Copyright © 2011-2022 走看看