Source code

function krpanoplugin(){
    var local = this;   // save the 'this' pointer from the current plugin object

    var krpano = null;  // the krpano and plugin interface objects
    var plugin = null;

    var xml_value = 100.0;   // the value for a custom xml attribute

    // registerplugin - startup point for the plugin (required)
    // - krpanointerface = krpano interface object
    // - pluginpath = the fully qualified plugin name (e.g. "plugin[name]")
    // - pluginobject = the xml plugin object itself
    local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
    {
        // get the krpano interface and the plugin object
        krpano = krpanointerface;
        plugin = pluginobject;


 

        // optionally - add some graphical content:

        // register the size of the content
        plugin.width = "100%";
plugin.height = "100%";plugin.align = "center"
        // use 100% width/height for automatic scaling with the plugin size
        var text = document.createElement("div");
        text.style.cssText = "width:100%;height:100%;"+
            "display:flex;color:white;background:rgba(10,50,100,0.5);"+
            "align-items:center;justify-content:center;text-align:center;";
        text.innerHTML = `<div id="myModal" class="modal">
		
		<div class= "container-fluid">
			
			<div class ="row" id ="content-3d">
				<span class="close" id="close1">&times;</span>
				<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
		<!-- Modal content -->
		<div class="modal-content" id="modal-content">
			<div id="model-viewer">
			</div>
		</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="box">
		<div id="table" class="infoTable">
			<!-- Modal content -->
			<div class="modal-table">
				<div id="model-viewer">
					<div id="info" class="display" style="width:100%">
						<div>
							<div style="margin: 10px 0px;font-size: 18px;color: rgb(255 255 255);display: block;background-color: #80808075;font-weight: 500;padding: 5px;">Tên sản phẩm: </div><span
								id="info-name">Unknown</span>
							<div id = "gioithieu" style="margin: 10px 0px;font-size: 18px;color: rgb(255 255 255);display: block;background-color: #80808075;font-weight: 500;padding: 5px;">Giới thiệu: </div><span
								id="info-features">Unknown</span>
							<div id ="thanhphan" style="margin: 10px 0px;font-size: 18px;color: rgb(255 255 255);display: block;background-color: #80808075;font-weight: 500;padding: 5px;">Thành phần: </div>
							<span id="info-specs">Unknown</span>
							<div id="luuy" style="margin: 10px 0px;font-size: 18px;color: rgb(255 255 255);display: block;background-color: #80808075;font-weight: 500;padding: 5px;">Thông tin khác: </div><span
								id="info-warning">Unknown</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	</div>
	</div>
	</div>
</div>`;

        // the plugin 'sprite' variable is the internal html element of the plugin
        plugin.sprite.appendChild(text);
    }

    // unloadplugin - exit point for the plugin (optionally)
    // - will be called from krpano when the plugin will be removed
    // - everything that was added by the plugin should be removed here
    local.unloadplugin = function()
    {
        plugin = null;
        krpano = null;
    }

    // onresize (optionally)
    // - width,height = the new size for the plugin
    // - when not defined then only the krpano plugin html element will be sized
    local.onresize = function(width,height)
    {
        // not used in this example
        // the plugin content will resize automatically because
        // of the width=100%, height=100% CSS style
        return false;
    }

  



     }

Source code

<plugin name ="modal" visible ="false" url ="modal.js" keep ="true">