Ionic 4 modal call on same page

I added modal as described above, Right now i added the whole page, where modal is called.
But i want to show only particular part of html of same page where modal caled in modal,
How can i do that.

Below is my code

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

  selector: 'app-search',
  templateUrl: './',
  styleUrls: ['./'],

export class SearchPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {

  async openModal() {
    const modal = await this.modalController.create({
      component: SearchPage,
      componentProps: { 
        foo: 'hello',
        bar: 'world'
    return await modal.present();

For more info see image, on click of product listing, i want to call modal where i can show product details info.