CADViewer Technical Documentation, Installation Guide and Reference Samples Library

Suppress/Exchange Highlight Modals

For an application programmer to take control of the Pop-Up modals and replace with their own interface, do follow the instructions below.

If wanting to work with the CADViewer Pop-Up Modal interface, please instead go to the resources - Custom Modals for Highlight and Dynamic Modals for Highlight.

Do the following:

In the declaration part of CADViewer turn off the Pop-Up Modal interface:


When a Space or (Block) is clicked, capture the interaction from the callback method:

function cvjs_graphicalObjectOnChange(type, graphicalObject, spaceID, evt){

In cvjs_graphicalObjectOnChange, pull the JSON object associated with the clicked object:

* Return a JSON structure of all content of a space object clicked: <br>
* 	var jsonStructure =  	{	"path":   path, <br>
*								"tags": tags, <br>
*								"node": node, <br>
*								"area": area, <br>
*								"outerhtml": outerHTML, <br>
*								"occupancy": occupancy, <br>
*								"name": name, <br>
*								"type": type, <br>
*								"id": id, <br>
*								"defaultcolor": defaultcolor, <br>
*								"highlightcolor": highlightcolor, 
*								"selectcolor": selectcolor, 
*								"layer": layer, <br>
*								"group": group, <br>
*								"linked": linked, <br>
*								"attributes": attributes, <br>
*								"attributeStatus": attributeStatus, <br>
*								"displaySpaceObjects": displaySpaceObjects, <br>
*								"translate_x": translate_x, <br>
*								"translate_y": translate_y, <br>
*								"scale_x": scale_x ,<br>
*								"scale_y": scale_y ,<br>
*								"rotate": rotate, <br>
*								"transform": transform, <br>
*								"svgx": svgx, <br>
*								"svgy": svgx, <br>
*								"dwgx": dwgx, <br>
*								"dwgy": dwgy } <br>
*                               "customContent" : "customobject",
*                               "pageNumber" : pageNumber,
*                               "pageName" : pageName,
*                                "block" : "",
*                               "blockAttributeId" : "",
*                               "blockAttributeCount" : "",
*                               "clickhandler" : "enable"
*                               } <br>
* @return {Object} jsonSpaceObject - Object with the entire space objects content

if (graphicalObject.toLowerCase().indexOf("space")){
myobject = cvjs_returnSpaceObjectID(spaceID);

Extract space object related information from the json object. For example the following code-sequence below shows how to extract Block Attributes for the content of a Space Modal.

The basic loop captures pairs of tag/value fields from the block attributes associated with a Space Object. :

myobject = cvjs_returnSpaceObjectID(rmid);
//console.log("myCustomPopUpBody is called: "+ rmid+" "+JSON.stringify(myobject));

try {
	// get block attribute:
	// block attributes are listed with  ID_counter , and can be retrived with cvjs:tag and cvjs:value

	cvjsPopUpBody = "<div style='line-height:75%'><font size='0'>";
	for (var i = 1; i <= myobject.blockAttributeCount; i++) {
		var attribId = "#" + myobject.blockAttributeId + "_" + i;
		cvjsPopUpBody += $(attribId).attr('cvjs:tag')+": <span id=\"mymodal_name_"+$(attribId).attr('cvjs:value')+"\" >"+$(attribId).attr('cvjs:value')+"</span><br>";
	cvjsPopUpBody+= "<font size='+2'></div>";
	return cvjsPopUpBody;


When done with the custom modal, clear out any highlights on canvas, by calling the method:


ENJOY - and get in touch!

Last updated on 1 Mar 2022
Published on 12 Apr 2020