我可以在离子弹出窗口体中添加自定义按钮吗？

Question

我创建了一个离子弹出窗口，而不是底部的默认两个按钮，我想在弹出窗口的主体中添加一个按钮。实际上真的有可能这样做吗？如果没有，还有其他方法/建议吗？

我试图在模板中插入一些HTML代码，但它没有用。 我想添加一个像灰色按钮的按钮，如图所示。感谢您抽出时间阅读我的问题。

Answer 1

如果通过创建意味着您实际创建/设计了此对话框，则可以按照自己喜欢的方式对其进行自定义。您可以使用http://jqueryui.com/dialog/。

您可以使用这些库创建外观和行为类似于对话框/弹出窗口的HTML元素，允许您在对话框中放置任何所需内容（包括按钮）。

Answer 2

是的，您可以通过将自定义按钮注入模板中，将其添加到离子弹出窗体的主体中。下面是基于Ionics Popup的夜间构建而没有逻辑。

请访问底部的codepen，以便您可以看到它的实际效果。如果您想自定义弹出窗口，也可以为其应用自定义css类。

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {

// Triggered on a button click, or some other target
$scope.showPopup = function() {
$scope.data = {}

var myPopup = $ionicPopup.show({
 title: 'Title',
 template: '<p>Customer Detail</p> <button type="button">Print</button>',
 scope: $scope,
 cssClass:'customPopupClass',
 buttons: [
     {text: 'Back' },
     {text: '<b>Submit</b>', type: 'button-dark',},
    ]
   });
  };
});

用于自定义弹出窗口的cssClass示例：

   .customPopupClass{
      .popup{
        //style for popup
      }
      .popup-title{
        //style for title
      }
    }

要进一步覆盖和自定义弹出窗口的CSS类列表

• .popup
• .popup头
• .popup-标题
• .popup子标题
• .popup体
• .popup-buttons.row
• .popup-buttons .button

这是codepen，所以你可以玩它。