Create popup button

Hi!

I am using the popup editor with its respective properties and it is working normally. I want to include a maximize button within my popup. When opening the popup the user has the possibility to maximize the total size of the screen.

Has anyone had to go through this and have any ideas to develop?

Thank you!

Hi, friend.

The popup layout has its own style properties. You can change its properties when click the button using javascript to get the window width and height to make it look like you need.

Are you developing a reactive or web application?

Refer below

https://www.w3schools.com/jsref/prop_win_innerheight.asp

Take Inner width and height of Window and then set the popup dimensions as suggested by Lenon in above post

I was trying to make some POC here and should work. Like Upendra said, you i'll have to manipulate the innerWidth and height to make it responsive. Something like:

function changeSize() {        

     let d = document.getElementById("resize");              
     d.className = "class2";        
     let w = window.innerWidth;        
     let h = window.innerHeight;        
     let wid = w + "px";        
     let hei = h + "px";        
     d.style.width = wid;        
     d.style.height = hei;    
}

It's a start.

Thanks for the answers.

I'm not very skilled with JavaScript and I'm still getting the logic in working with these calls between the JS, CSS and Webblock layers.

The steps I'm doing are:

1 ° In the popup window property I put Javascript to capture the size of the popup and for working to change the size.

2 ° Includes a container with OnClick = "MaximizePopup ()" to make the function call in javascript.

3 ° In the function it captures the values of the popup window and now I get lost. = /

Wouldn't it be possible to include the new size I want from the popup window I want inside JavaScript with CSS?

If not, within JavaScript, call my CSS that is defined in the webblock?

I'm working on a forge component to do a pop up resizable. If you wait until tomorrow I release.

Lenon Manhães wrote:

Show!

I'm almost able to use the jquery toggleclass to solve my problem. It just needs a few adjustments. But making something like that available in the forge will be great! When finished, share the link with us. Thank you!

I would like to leave my solution simplified, for the next people who have this situation.

I found that the div element is generated using javascript. Therefore, it is necessary to use javascript to change these properties only after the pop-up is generated.

And since the pop-up is inside an iframe, one solution is to insert something like this piece of jquery in an xy expression in the pop-up:

$ (document) .ready (function () {
  $ ('# "+ btnMax.Id +"'). click (function () {
    $ ('. os-internal-Popup', window.parent.document) .css ('top', '0px');
    $ ('os-internal-Popup', window.parent.document) .css ('cor de fundo', '# e6e6e6');
  });
});

Thank u!