search common modal executd in home page

src/app/home/home.page.html

@@ -5,7 +5,9 @@
     </ion-menu-toggle>
 
     <div class="nav_title floatLeft relative">
-        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText>
+        <!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
+
+        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="searchModal()">
 
     </div>
     <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">

src/app/home/home.page.ts

@@ -165,7 +165,7 @@ export class HomePage implements OnInit {
     this.searchService.search(data);
   }
 
-  async openModal() {
+  async searchModal() {
     const modal = await this.modalController.create({
       component: SearchmodalPage
     });

src/app/searchmodal/searchmodal.page.html

-<h1>Search modal</h1>
+<div class="nav_header">
\ No newline at end of file
+    <button class="nav_btn nav_back floatLeft" (click)="closeModal()">
+    </button>
+    <div class="nav_title floatLeft relative">
+        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc...">
+    </div>
+    <button class="nav_btn nav_close floatRight" (click)="closeModal()">
+    </button>
+    <div class="clear"></div>
+</div>
+<div class="search_item_list">
+    <ul>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+        <li>Item </li>
+    </ul>
+</div>
\ No newline at end of file

src/app/searchmodal/searchmodal.page.ts

 import { Component, OnInit } from "@angular/core";
+import { ModalController, NavParams } from "@ionic/angular";
 
 @Component({
   selector: "app-searchmodal",
@@ -6,7 +7,14 @@ import { Component, OnInit } from "@angular/core";
   styleUrls: ["./searchmodal.page.scss"]
 })
 export class SearchmodalPage implements OnInit {
-  constructor() {}
+  constructor(
+    private modalController: ModalController,
+    private navParams: NavParams
+  ) {}
 
   ngOnInit() {}
+
+  async closeModal() {
+    await this.modalController.dismiss();
+  }
 }