2015-05-27 2 views
1

В моем ионном проекте (ionic + angularjs) мне нужно использовать поле $ ionicPopup, чтобы показать полную информацию о конкретном продукте, когда пользователь нажимает на это имя продукта. Но я пытался подтолкнуть всплывающее окно, я не мог. Даже, я попробовал с 'templateUrl: templates/example.html'. Но я не получил ожидаемых результатов.

Мне нужно показать информацию о продукте шириной 75% и высотой 75%. Или есть какой-либо другой способ отображения деталей с таким же эффектом $ ionicPopup do. Пожалуйста, помогите мне.

+0

Для настройки я использую css. Интересно знать различные методы решения этой проблемы. – Codelord

+0

Как? Не могли бы вы объяснить это? –

+0

Как вся страница HTML, так что вы можете добавить css в всплывающее окно. Если вы проверите элемент всплывающего окна, вы увидите разные классы, такие как всплывающее окно и всплывающее окно. Теперь вам просто нужно добавить определенный стиль для каждого класса по вашему желанию. Сделайте эти стили важными для переопределения оригинальных стилей. – Codelord

ответ

2

Возможно, вам не следует использовать $ ionicPopup, но $ ionicModal.

Я сделал учебник по How to Display Images in a Popover, где я использовал шаблоны и пользовательский CSS. Это может сработать и для вас!

В вашем случае вы можете позвонить

$ionicModal.fromTemplateUrl('templates/example.html', { 
    scope: $scope, 
    animation: 'slide-in-up' 
}).then(function(modal) { 
    $scope.modal = modal; 
    $scope.modal.show(); 
}); 

Дополнительно следует обернуть шаблон HTML в

<div class="modal" ng-click="closeModal()"> 
... 
</div> 

где closeModal() закрывает модальный вид.

Наконец, добавьте CSS-стиль для 75% высоты и ширины.

+0

Большое спасибо за ответ ур. Я постараюсь и скоро вернусь –

Смежные вопросы