How to create a in Model Pop Up functionality when SuiteCommerece Advances inmodel() function doesn’t work in the entrypoint of JS

In some conditions the vew.showInModel() function of SCA maynot work we can recreate the some functionality by using the below code and its simpler than inModel() function.

Template:

<section class="product">
  <div class="product-feed">
    <div class="shop-blvd-header-container">
      <h1 class="shop-blved-text"> SHOP THE BLVD FEED</h1>
      <h2 class="follow-us-text">FOLLOW US</h2>
    </div>
    <div class="shop-the-blvd-container">
      <div class="blvd-shop-feed">
        {{#each blvdSliderFeed}}
        <a class="blvd-feed-card" id="{{itemnames}}" data-action="show-slider-popup">
          <div class="blvd-feed-image-container">
            <img class="blvd-feed-image" src="{{mainimage}}" alt="{{itemnames}}">
          </div>
        </a>
        {{/each}}
      </div>
    </div>
    <div class="blvd-scroll-buttons">
      <a class="blvd-scroll-button">
        <img id="prev-blvd-scroller"
          src="/SSP Applications/NetSuite Inc. - SCS/SuiteCommerce Standard/img/icons8-less-than-50.png" alt="Previous">
      </a>
      <a class="blvd-scroll-button">
        <img id="next-blvd-scroller"
          src="/SSP Applications/NetSuite Inc. - SCS/SuiteCommerce Standard/img/icons8-less-than-50.png" alt="Next">
      </a>
    </div>
  </div>
  </div>
</section>
<section id="popup-scroller-inmodel-container" class="popup-scroller-inmodel-container">
  <div id="popup-left-hand-side">
    <a class="close-btn-container"><img src="/iloveblvdimages/Close-button.png" alt="Close"></a>
    <div class="lower-container">
      <div class="left-hand-side-img-container">
        <img class="left-hand-side-producr-img" alt="" src="">
      </div>
      <div class="right-hand-side-img-container">
        <div class="product-image-container">
          <img class="right-hand-side-producr-img" alt="" src="">
        </div>
        <div class="product-name-container"></div>
        <a href="" class="product-by-link">Buy Now</a>
      </div>
    </div>
  </div>
</section>

SCSS:

.shop-the-blvd-container {
	width: 96%;
	position: relative;
	overflow: hidden;
	margin: auto;
	margin-top: 25px;
}
.shop-the-blvd-container>.blvd-shop-feed {
	width: 9999%;
	height: 100%;
	list-style: none;
	left: 0;
	margin: 0;
	padding: 0;
	position: relative;
	transition: all 0.75s ease;
	display: flex;
}
.blvd-feed-card {
	width: calc(24vw - 10px);
	padding: 10px;
}
.blvd-scroll-buttons>.blvd-scroll-button:first-child {
	position: absolute;
	width: max-content;
	height: 8%;
	bottom: 41%;
	right: 0%;
}
.blvd-scroll-buttons>.blvd-scroll-button:nth-child(2) {
	position: absolute;
	width: max-content;
	transform: rotate(180deg);
	right: 0%;
	bottom: 39%;
}
#prev-blvd-scroller,
#next-blvd-scroller {
	width: 70%;
}
.shop-blvd-header-container {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 96%;
	margin: auto;
}
.shop-blved-text {
	color: #050505;
	font-family: 'Bossa Black';
	font-size: 60px;
	font-weight: 900;
	text-decoration: none;
	line-height: 1.2;
	padding: 0;
	margin: 0;
	margin-left: 10px;
	text-transform: none;
}
.follow-us-text {
	color: #050505;
	font: 24px 'Bossa Black';
	font-weight: 900;
	padding-right: 10px;
}
.blvd-scroll-buttons>.blvd-scroll-button:first-child {
	bottom: 34%;
	left: 1%;
	right: 0%;
}
.blvd-scroll-buttons>.blvd-scroll-button:nth-child(2) {
	right: 2%;
	bottom: 34%;
}
.popup-scroller-inmodel-container {
	display: none;
}
.popup-scroller-inmodel-container.active {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(135, 140, 147, 0.76);
	z-index: 1000;
	top: 0;
	bottom: 0;
}
#popup-left-hand-side {
	width: 60%;
	margin: auto;
	height: 80%;
	background: white;
	position: relative;
	top: 10%;
}
.lower-container {
	display: grid;
	grid-template-columns: 6fr 3fr;
	height: 100%;
	overflow: hidden;
}
.close-btn-container {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 25px;
}
.left-hand-side-img-container {
	padding: 40px;
	overflow: hidden;
}
.right-hand-side-img-container {
	width: 90%;
	display: grid;
	height: 60%;
	margin: auto;
}
.product-image-container {
	margin: auto;
	width: 70%;
}
.product-by-link,
.product-name-container {
	width: max-content;
	margin: auto;
}
.product-by-link {
	border: 1px solid #303130;
	width: max-content;
	margin: auto;
	padding: 2px 15px;
}
.product-by-link:hover {
	background: black;
	color: white;
	border-color: transparent;
	transition: all 300ms ease-in-out;
}
.blvd-feed-image-container {
	margin: auto;
	height: 100%;
}
img.left-hand-side-producr-img,
.blvd-feed-image {
	margin: auto;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
@media (min-width: $screen-sm) and (max-width: $screen-lg) {
	#popup-left-hand-side {
		width: 80%;
	}
}
@media (max-width: $screen-md) {
	.blvd-scroll-buttons>.blvd-scroll-button:first-child {
		bottom: 34%;
		left: 1%;
		right: 0%;
	}
	.blvd-scroll-buttons>.blvd-scroll-button:nth-child(2) {
		right: 2%;
		bottom: 34%;
	}
	.shop-blvd-header-container {
		flex-direction: column;
	}
	.shop-blved-text {
		font: 1.7rem 'Bossa Black';
		font-weight: 700;
	}
	.follow-us-text {
		width: 100%;
		font-size: 1rem;
		font-weight: 700;
		margin: 0;
		padding: 0;
		padding-right: 15px;
		text-align: right;
	}
}
@media (max-width: $screen-sm) {
	.blvd-scroll-buttons>.blvd-scroll-button:first-child {
		bottom: 35.5%;
		left: 1%;
		right: 0%;
	}
	.blvd-scroll-buttons>.blvd-scroll-button:nth-child(2) {
		right: 2%;
		bottom: 30%;
	}
	#prev-blvd-scroller,
	#next-blvd-scroller {
		width: 70%;
	}
	#popup-left-hand-side {
		width: 80%;
		height: 60%;
		top: 20%;
	}
}
@media (max-width: $screen-xs) {
	.blvd-scroll-buttons>.blvd-scroll-button:first-child {
		bottom: 15vw;
		left: 1%;
		right: 0%;
	}
	.blvd-scroll-buttons>.blvd-scroll-button:nth-child(2) {
		right: 2%;
		bottom: 13.5vw;
	}
	#prev-blvd-scroller,
	#next-blvd-scroller {
		width: 50%;
	}
	.lower-container {
		grid-template-columns: 1fr;
		grid-template-rows: auto 220px 30px 30px;
	}
	.left-hand-side-img-container {
		padding: 30px 30px 0px;
		overflow: hidden;
	}
	.right-hand-side-img-container {
		width: 100%;
		display: grid;
		height: 90%;
		margin: auto;
		gap: 10px;
	}
	.product-image-container {
		margin: auto;
		width: 40%;
	}
	.close-btn-container {
		right: 5px;
		top: 5px;
	}
}

JavaScript (Entry Point):

events: _.extend({}, HomeView.prototype.events, {

					'click [data-action="show-slider-popup"]': 'showSliderPopup',
					'click .close-btn-container': 'hideSliderPopup',
				}),
showSliderPopup: function (e) {
					let currentPopUp = e.currentTarget.childNodes[0].childNodes[0].alt;
					let popUpData = _.filter(SC.CONFIGURATION.homepage.shopblvd.Links, function (linkData) {
						return linkData.itemnames === currentPopUp;
					});
					$('.left-hand-side-producr-img').attr('src', popUpData[0].popupimage);
					$('.left-hand-side-producr-img').attr('alt', popUpData[0].itemnames);
					$('.right-hand-side-producr-img').attr('src', popUpData[0].itemimage);
					$('.right-hand-side-producr-img').attr('alt', popUpData[0].itemnames);
					$('.product-by-link').attr('href', popUpData[0].buybutton);
					$('.product-name-container').text( popUpData[0].itemnames);
					$('#popup-scroller-inmodel-container').addClass('active');
					let imageContainerHeight = $('#popup-left-hand-side')[0].offsetHeight;
					$('.lower-container').css('height', imageContainerHeight + 'px');
				},
				hideSliderPopup: function (e) {
					$(".left-hand-side-producr-img").removeAttr("src");
					$(".left-hand-side-producr-img").removeAttr("alt");
					$(".right-hand-side-producr-img").removeAttr("src");
					$(".right-hand-side-producr-img").removeAttr("alt");
					$(".product-by-link").removeAttr("href");
					$(".product-name-container").text("");
					$("#popup-scroller-inmodel-container").removeClass("active");
				},