javascript - 使用 Angular-modal-service 而不使用 bootstrap

Question

我正在尝试在我的 Angular 应用程序中实现模态服务。现在我正在使用 Angular-modal-service ( http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/ )。

博客说我们可以在没有 Bootstrap 的情况下实现模式，但没有示例。有什么帮助吗？

现在我也尝试使用 Bootstrap 。但到目前为止还没有运气。这是我的 Controller

require([
    'services/abcService',
    'angular-services/angular-modal-service',
    'libraries/bootstrap'
], function (app) {
    "use strict";

    abcController.$inject = ['angularModalService'];

    function abcController(abcService, ModalService) {
        var self = this;

        abcService.getData().success(function (data) {
            self.names = data.names;
        });

        self.show = function () {
            ModalService.showModal({
                templateUrl: 'abc.html',
                controller: 'pqrController'
            }).then(function (modal) {
                modal.element.modal();
                modal.close.then(function () {
                    console.log("hey  !");
                });
            });
        };
    };

    app.controller('abcController', abcController);

});

这是 pqrController

require([
    'angular-services/angular-modal-service'
], function (app) {
    "use strict";

    function pqrController(close) {
        this.close = function (result) {
            close(result, 500);
        };
    };

    app.controller('pqrController', pqrController);

});

现在，当我从 Controller 1 调用 show() 函数时，我会在屏幕底部获取模式的 html。相反，它应该在屏幕上显示为模式。

Answer 1

模态的工作方式是在要显示为模态的元素上放置一些类；然后，CSS 与这些类一起工作，使元素按照您想要的方式显示。听起来您仍然将类添加到元素上，但没有 CSS 将其放置在您想要的位置。我建议从 bootstrap 资源中获取灵感，研究如何制作满足您需求的 CSS。