Skip to main content
6-Contributor
March 12, 2024
Solved

Can I change the modal pop up location by css

  • March 12, 2024
  • 2 replies
  • 2237 views

I want to check if the modal popup location, that is center of the screen can be changed by any means?

Best answer by JK_10164157

We do this using custom CSS on mashup level where navigation function is used.

Steps to reproduce:

  1. Define navigation function as ModalPopup
  2. View mashup and execute navigation
  3. Use devtools to inspect the html and find the id of the modal popup div 
    • JK_10164157_0-1710238423549.png
  4. Define the required position in the mashup custom CSS section (We also change the background blur opacity in this example):

 

.mashup-popup[id$='-2_navigationfunction-54-popup'] {
	left: 6px !important;
	top: 106px !important;
	position: absolute !important;
}

.mashup-popup[id$='-2_navigationfunction-54-popup'] .widget-bounding-box[id$='-2_navigationfunction-54-popup-bounding-box'] {
	width: auto !important;
	height: auto !important;
	position: absolute !important;
}

.mashup-popup-overlay {
	opacity: 0.25 !important;
}

 

 

Hope this helps.

2 replies

16-Pearl
March 12, 2024

Hi @SK_9989757  Look at the below issue, looks similar to your issue, let us know if it does not match your use-case.

https://community.ptc.com/t5/ThingWorx-Developers/Border-Radius-to-Modal-Pop-ups/m-p/778073#M56806

7-Bedrock
March 12, 2024

We do this using custom CSS on mashup level where navigation function is used.

Steps to reproduce:

  1. Define navigation function as ModalPopup
  2. View mashup and execute navigation
  3. Use devtools to inspect the html and find the id of the modal popup div 
    • JK_10164157_0-1710238423549.png
  4. Define the required position in the mashup custom CSS section (We also change the background blur opacity in this example):

 

.mashup-popup[id$='-2_navigationfunction-54-popup'] {
	left: 6px !important;
	top: 106px !important;
	position: absolute !important;
}

.mashup-popup[id$='-2_navigationfunction-54-popup'] .widget-bounding-box[id$='-2_navigationfunction-54-popup-bounding-box'] {
	width: auto !important;
	height: auto !important;
	position: absolute !important;
}

.mashup-popup-overlay {
	opacity: 0.25 !important;
}

 

 

Hope this helps.

19-Tanzanite
March 12, 2024

Much appreciated, really nice example!