Design for a pop-up window displaying fields for entering both a username and

Currently, I am developing a mobile app using Ionic and I am in need of a popup window to collect two pieces of data - a username and a password. After researching several websites, I was unable to find a solution that addressed collecting two pieces of data in a popup window. Additionally, I would like the popup window to have a purple background color. Can anyone guide me on how to achieve this?

$scope.create = function() {
    $scope.data = {}; 
  // Creating a customized popup
  var myPopup = $ionicPopup.show({
    template: '<input type="password" ng-model="data.one">',
    style: 'background-color:purple;',
    title: 'Enter Wi-Fi Password',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Save</b>',
        type: 'button-balanced',
        onTap: function(e) {
          if ((!$scope.data.one)&&(!$scope.data.two)) {
            e.preventDefault();
          } else {
            return $scope.data;
          }
        }
      }
    ]
  });
}

Answer №1

To complete this task, you can utilize the $ionicModal feature

Below is a functional demonstration

HTML Code

  <script id="add-or-edit-cart.html" type="text/ng-template">

        <ion-modal-view>
            <ion-header-bar>
                <h1 class="title">{{ action }} Page</h1>
                <div class="buttons">
                    <button ng-click="deleteCart()" class="button button-icon icon ion-close"></button>
                </div>
            </ion-header-bar>
            <ion-content>
                <div class="list list-inset">
                    <label class="item item-input">
                      Placeholder Text
                    </label>

                </div>

            </ion-content>
        </ion-modal-view>

    </script>

Integrate ng-click to View cart located in the footer section

<ion-footer-bar  class="bar-footer btn-footer bar-light">
  <div class="row">
    <div class="col">
      <button ng-click="vm.showCart()" ng-controller="OverviewController as vm" class="button  button-block button-positive"> View Cart Page </button>
    </div>
    <div class="col">
      <button class="button  button-block button-calm"> View Checkout Page </button>
    </div>
  </div>
</ion-footer-bar>

Javascript Section

Incorporate the Controller below

.controller('OverviewController', function ($scope, $ionicModal) {
    var vm = this;

    $ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    vm.showCart = function () {
        $scope.Cart = {};
        $scope.action = 'Cart';
        $scope.isAdd = true;
        $scope.modal.show();
    };

    $scope.deleteCart = function () {

        $scope.modal.hide();
    };

    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

    return vm;

Here is a functioning CodePen demo link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a URL be included in the options of an rmarkdown header?

We have developed a method within our team to create branded reports from rmarkdown documents using custom CSS and HTML files. To maintain consistency, we utilize absolute paths to the style documents in our shared file structure. This allows us to easily ...

Can an action be activated when the mouse comes to a halt?

Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops mov ...

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

I'm working on a game project using HTML canvas and javascript. The canvas I am using has dimensions of 1280 x 720 px with a 16:9 aspect ratio. My goal is to have the game displayed at fullscreen, but with black bars shown if the screen ratio is not 1 ...

Unable to retrieve the correct `this` value within an axios callback

Feeling a bit fuzzy-brained at the moment. I've put together this code that downloads a JSON from a URL and displays it on the screen: export default class App extends React.Component { constructor(props) { super(props); this.state = { data: [], } } ...

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...

Using JQuery to create interactive dropdown menus with dynamic options

I am exploring the possibility of dynamically updating the choices available in an HTML dropdown menu based on the selection made by a user - consider this sample JSON data: series: [ {name: 'Company X', product: 'X1'}, {name: 'Co ...

Developed a visually stunning image gallery using both Bootstrap Grid and Flexbox, though there are a few images that do not completely fill the flex container

I'm currently exploring web development and experimenting with creating a responsive image gallery using Bootstrap Grid and flexbox. However, I've encountered an issue where some of the images are not filling the entire height of the flex contain ...

Rearrange the position of the divs in every other container

Assume that I have the following HTML structure: <div class="article"> <div class="article_img"></div> <div class="article_preview"></div> </div> Both article_img and article_preview elements have a defined width and ...

`Incorporate numerous models into a For Loop for efficient processing`

Currently, my goal is to: Retrieve a JSON file from the server that contains data regarding my models Utilize a PLY loader within a for loop to incorporate them into the scene Include them in an array Below are the functions I've implemented: func ...

Connect chosen options from Multicombobox in personalized UI5 control

I am looking to connect selectedItems, which are sourced from JsonModel in the controller, to a custom control. Custom control sap.ui.define([ 'sap/ui/core/Control', 'sap/m/MultiComboBox', ], function (Control, MultiComboBox) { ...

When the page is loaded, ensure a condition is met before displaying a modal pop-up using AngularJS

Just starting out with AngularJS and looking to implement a modal pop up? I've tried using the modal on button click from the Angular dialog demo tutorial. Now, I want to show the pop up based on a condition when the page loads. The idea of automatic ...

What causes the auto focus directive to fail to function properly?

I'm having trouble getting the auto focus directive to work. Can anyone take a look at my code? It seems like there might be an issue with it. var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', functio ...

Utilizing the power of async/await to simplify Hapi17 route abstraction

Trying to understand the transition to async/await in Hapi 17 is a bit of a challenge for me. My main focus is figuring out how to modify an abstracted route to make it compatible with async/await. Here is a snippet from my routes\dogs.js file: con ...

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

Transferring Database Information between AngularJS Controllers

I'm having trouble figuring out the best way to pass database data loaded in one controller to another controller. When I load a list of items from the server, I want to display the details of each item on a separate screen based on its id when click ...

Grunt Alert: Unable to locate "concat" task

I'm having some trouble starting with a basic Grunt example, specifically encountering an issue with grunt-contrib-concat. This is my setup in Gruntfile.js: $ cat Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.f ...

Precommit hook failing to activate despite errors occurring

"scripts": { "precommit": "pretty-quick --staged & npm run lint & npm run test", "lint": "eslint 'src/**/*.{js,jsx}' --quiet --fix", "test": "cross-env CI=true react-scripts test --env=jsdom --coverage" } https://i.sstatic.net/M ...

Hovering over objects in Three.js does not function as effectively as clicking on them

Just getting into Three.js I'm attempting to load a GLTF model and add mouseover and mouseout events. The goal is for the color of the GLTF model to change on mouseover and revert back to the original on mouseout. I have had some success with this, ...

Using Formik: When the initial value is changed, the props.value will be updated

After the initial props are updated, it is important to also update the values in the forms accordingly. export default withFormik({ mapPropsToValues: (props: Props) => { return ( { id: props.initialData.id, ...

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter

Please take note: The scrollbar-gutter: stable; property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox. I have observed some unusual behavior when attempting to position elements fixed to t ...