How to create and display popup using the extension

We have to extend the view of the popup method from the source code to extension and we can display the popup

Templet:
<section class="order-history-details-order-uploadCheck">
    <div class="popup" id="popup">


        <input type="file" data-action="input-action" name="Check-input-file" id="in-modal-Check-input-file"
            accept="image/png, image/jpeg">
        <input type="text" name="Check-input" id="in-modal-Check-input" hidden>
        <input type="text" name="Invoice-input" id="invoice-input" hidden>
        <input data-action="check-submit-action" id="check-submit-btn" type="submit" value="Submit" class="order-history-summary-button-uploadCheck">
        <div>
            <small class="msgafteruploadCheckfield"></small>
            <small class="msguploadCheckfield"></small>
            <small class="fileCheckformaterrormessage"></small>
        </div>
    </div>

</section>

Sass:

.popup {
	background: #fff;
	border-radius: 6px;
	//position: absolute;
	top: 0;
	left: 5%;
	//transform: translate(-50%,-50%) scale(0.1) ;
	text-align: center;
	padding: 0 30px 30px;
	color: #333;
	//visibility: hidden;
	transition: transform 0.4s, top 0.4s;
}

.open-popup {
	visibility: visible;
	top: 45px;
	transform: translate(-5%, -50%) scale(1);
}



input[name="Check-input-file"] {
	border-color: #eeeeee;
}

.showloadingUpload{
	position: relative;
}
.showloadingUpload::after {
	content: "";
	display: block;
	//position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image:url(getExtensionAssetsPath('img/loading1.gif'));
	opacity: .3;
	background-repeat: no-repeat;
	background-size: cover;

}

.order-history-summary-button-uploadCheck {
	@extend .button-secondary;
	@extend .button-medium;
	@extend .button-generic;
	margin-bottom: $sc-margin-lv2;
	display: block;
	background-color: $sc-color-black;
	border-color: $sc-color-black;

	&:hover,
	&:active,
	&:focus {
		background-color: $sc-color-black;
		border-color: $sc-color-black;
		text-transform: none;
		font-weight: 400;
	}

	padding: 10px 0px;
}

.msgafteruploadCheckfield,
.msguploadCheckfield,
.fileCheckformaterrormessage {
	margin-left: 5px;
}

define(
	'JJ.upload.check'
	, [
		 'OrderHistory.Summary.View', 'jj_upload_check.tpl', 'Utils', 'JJ.upload.check.Model',
		"JJ.upload.check.View"
	]
	, function (
		OrderHistorySummaryView, jj_upload_check_tpl, Utils, uploadCheckModel, uploadCheckView
	) {
		'use strict';

		return {
			mountToApp: function mountToApp(container) {
				// using the 'Layout' component we add a new child view inside the 'Header' existing view 
				// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
				// more documentation of the Extensibility API in
				// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html

				/** @type {LayoutComponent} */
				var layout = container.getComponent('Layout');
				_.extend(OrderHistorySummaryView.prototype, {
					template: jj_upload_check_tpl
					,
					events: _.extend({}, OrderHistorySummaryView.prototype.events, {
						
						'click [data-action="btn-data-action"]': 'showcheckmodal'
					}),
				
					showcheckmodal: function showcheckmodal() {
					
						var view = new uploadCheckView({
							application: container,
							salesorderID: this.model.id

						});
						view.showInModal();
					}
				})
			}
		};
	});