cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Help us improve the PTC Community by taking this short Community Survey! X

Can I change the modal pop up location by css

SK_9989757
5-Regular Member

Can I change the modal pop up location by css

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

1 ACCEPTED SOLUTION

Accepted Solutions
JK_10164157
5-Regular Member
(To:SK_9989757)

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.

View solution in original post

3 REPLIES 3

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

JK_10164157
5-Regular Member
(To:SK_9989757)

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.

Much appreciated, really nice example!

Top Tags