angularJs页面弹框的实现

前端之家收集整理的这篇文章主要介绍了angularJs页面弹框的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

弹框需要三样东西,点击发生弹框事件的按钮,弹框页面,js逻辑。
下面用一个实例解释:
1,按钮:按钮的点击事件为toSendEmail()

  1. <button type="button" ng-click="vc.toSendEmail()" class="button button-icon ion-ios-email-outline" style="margin-right: -5px;"></button>

2,弹框页面:新建一个html,命名为emailPop.html,代码如下:

  1. <img ng-click="searchPopup.close()" src="img/login/close.png" style="position:absolute;top:-12px;right:-12px;z-index:99999;width:30px;">
  2. <form name="form" style="margin:-10px;">
  3. <div class="list input-border">
  4. <label class="item item-input padding-right">
  5. <span class="input-label">客户邮箱</span>
  6. <input type="text" placeholder="请输入客户邮箱地址">
  7. </label>
  8.  
  9. </div>
  10. </form>

3,js部分:

  1. $scope.vc = {
  2. toSendEmail:function(){
  3. $scope.searchPopup = $ionicPopup.show({
  4. templateUrl:'app/requirement/view/pop/emailPop.html',title:'弹框标题',scope: $scope,backdropClickToClose:true,cssClass:'form-popup',animation: 'slide-in-up',buttons:[{
  5. text: '<b>取 消</b>',type: 'button-light',onTap: function(e) {
  6. $scope.searchPopup.close();
  7. }
  8. },{
  9. text: '<b>发 送</b>',type: 'button-positive',//判断邮箱是否为空
  10. // onTap: function(e) {
  11. // if($scope.customerEmail == ''){
  12. // utils.JAlert.alertOnce("请填写客户邮箱!");
  13. // return false;
  14. // }
  15. // search();
  16. // }
  17. }]
  18. });
  19. },}

猜你在找的Angularjs相关文章