Creating Ionic 3 Landing and Login Page Popup using custom styled Modal

In the tutorial, I am going to show how to create an ionic 3 landing page with a modal login page.

Source Code

Article Objective

The objective of this post is to show the technique I personally used when theming my Ionic apps

The Project

Lets start by creating a new ionic project using the blank template like so:

ionic start ionic3-login-modal blank

The Resources

I will be making use of a very nice logo downloaded from Logologo website. They have a lots of free and paid logos in stock. Check them out!

The background image used is also from PixaBay.
The logo and the background image has been added to src/assets/imgs folder

The Landing Page

Open up the home.html file and replace the code with the following:

  


        
    

Company Name



          
          


Welcome



          
        
      
        
                    
        
        
                      
        
      
  

Let's break down the code. I have broken it into three areas using divs - Top Page, Middle Page and Bottom Page. It is pretty straightforward as I have used a descriptive names.

In the top page area we have the logo and the company name, and the middle page holds the welcome tagline while the bottom page is where we have our set of button.

The Landing Page CSS

Open up the home.scss file and add the following:

page-home {
     .scroll-content,
     fixed-content {
          overflow: hiddden;
          background: url(../assets/imgs/bg.png) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;

          .top-page {
               padding-top: 35%;
               height: 50%;
               h2 {
                    img {
                         max-width: 25% !important;
                         background: #fff;
                         ;
                         padding: 5px;
                         border-radius: 6px;
                    }
               }
          }
          .middle-page {
               padding-top:4rem;
               height: 34%;               
              
          }
          .bottom-page {
               height: 15%;
               button.loginBtn {
                    height: 3.7rem;
               }
          }
     }
}

The home page should now look like this:

The Home Page .ts File Code

  showLoginModal() {
    const modalOptions: ModalOptions = {
      cssClass: "signInModal"
    };
    const modal = this.modalCtrl.create("LoginPage", {}, modalOptions);
    modal.present();
  }

One thing to take note of in the above code is then cssClass added to the modalOption. That is what we will use in customizing the modal page later.

The Login Page

Create another page by running ionic g page login and replace the html code to reflect the following:

    
        


            
        

            Company Name
          


          
        
      
        
          
        

        
            
        
      
      

Modal Page CSS

Create a file named login.scss within the theme folder and add the following codes:

.signInModal {
     padding: 30px;
     .modal-wrapper {
          border-radius: 7px;
          background: rgba(0, 0, 0, 0.5);
          height: 75% !important;
          margin-top: 10%;

          ion-list{               
               
               .login-top{
                    margin-top: -20px;
                    background: #4eb5e2; 
                    padding-bottom: 10px; 
                    margin-bottom: 25px;         
               }
               img {
                    margin-top: 15%;
                    max-width: 30%;
               }

               .item{
                    
                    background: none !important;
                    button{
                         height:4rem !important;
                    }
               }
          }
     }
}

Import the file in the app.scss file like so:

@import "theme/login"

By clicking on the sign in button on the home should open the login modal like so:

Do you have a better way of doing this? Please comment below if you know how it can be done better.

I hope this helps. Happy coding !