This topic is locked

Bootstrap add / edit popup window resize - New for v10

10/23/2018 1:28:07 PM
PHPRunner Tips and Tricks
F
FunkDaddy author

I originally posted tip on how to control popup window resize here forum post
Then another updated version here in another forum post
Now I have another update for PHPR version 10 as follows:



//================================Start Popup Window Resize ==================================

//Conditional is to prevent error log from firing when we open this page not via popup (ex: right click open new tab)

//We default to 90% height and 70% width if not defined

function customPopupSizeController( pct_height = 90, pct_width = 70 , popup_object = pageObj){

//check if mobile device and if so exit function alltogether

if( navigator.userAgent.match(/Android/i)

|| navigator.userAgent.match(/webOS/i)

|| navigator.userAgent.match(/iPhone/i)

|| navigator.userAgent.match(/iPad/i)

|| navigator.userAgent.match(/iPod/i)

|| navigator.userAgent.match(/BlackBerry/i)

|| navigator.userAgent.match(/Windows Phone/i))

{

return true;

}

if(popup_object.bsWin){

console.log('Yes, opened as a popup');
var widgetNodeMain = $( popup_object.bsWin[0].childNodes[0] );//MODAL MAIN (aka div with class "modal-dialog ui-draggable" )



var widgetNodeContent = $( widgetNodeMain[0].childNodes[0] );//MODAL CONTENT



var widgetNodeHeader = $( widgetNodeContent[0].childNodes[0] );//MODAL HEADER
var widgetNodeBody = $( widgetNodeContent[0].childNodes[1] );//MODAL BODY



var widgetNodeFooter = $( widgetNodeContent[0].childNodes[2] );//MODAL FOOTER



if (window.screen) {



w = window.innerWidth * pct_width / 100;

h = window.innerHeight * pct_height / 100;
top_pos = (window.innerHeight - h ) / 2;//help us center this on screen

top_pos += 'px';



};
widget_height = h + 'px';

widget_width = w + 'px';



widget_body_height = ( h - widgetNodeHeader[0].clientHeight - widgetNodeFooter[0].clientHeight ) + 'px';
widgetNodeMain.css({'height': widget_height, 'width': widget_width, 'top': top_pos, 'margin-top': '0px'});//aka div with class " modal-dialog ui-draggable

widgetNodeContent.css({'height': widget_height, 'width': '100%'});//aka div with class "modal-content ui-resizable"

widgetNodeBody.css({'height':widget_body_height, 'width': '100%'}); //aka div with class "modal-body"



}else{

console.log('No, not opened in a popup');

}

}

//================================End Popup Window Resize ==================================;
customPopupSizeController( 65, 90 );//call this function passing in height and width as percentage
H
htmalbenur 10/24/2018

Thx a lot. Plz can you tel me how and where to put this code?
thx



I originally posted tip on how to control popup window resize here forum post
Then another updated version here in another forum post
Now I have another update for PHPR version 10 as follows:



//================================Start Popup Window Resize ==================================

//Conditional is to prevent error log from firing when we open this page not via popup (ex: right click open new tab)

//We default to 90% height and 70% width if not defined

function customPopupSizeController( pct_height = 90, pct_width = 70 , popup_object = pageObj){

//check if mobile device and if so exit function alltogether

if( navigator.userAgent.match(/Android/i)

|| navigator.userAgent.match(/webOS/i)

|| navigator.userAgent.match(/iPhone/i)

|| navigator.userAgent.match(/iPad/i)

|| navigator.userAgent.match(/iPod/i)

|| navigator.userAgent.match(/BlackBerry/i)

|| navigator.userAgent.match(/Windows Phone/i))

{

return true;

}

if(popup_object.bsWin){

console.log('Yes, opened as a popup');
var widgetNodeMain = $( popup_object.bsWin[0].childNodes[0] );//MODAL MAIN (aka div with class "modal-dialog ui-draggable" )
var widgetNodeContent = $( widgetNodeMain[0].childNodes[0] );//MODAL CONTENT
var widgetNodeHeader = $( widgetNodeContent[0].childNodes[0] );//MODAL HEADER
var widgetNodeBody = $( widgetNodeContent[0].childNodes[1] );//MODAL BODY
var widgetNodeFooter = $( widgetNodeContent[0].childNodes[2] );//MODAL FOOTER
if (window.screen) {
w = window.innerWidth * pct_width / 100;

h = window.innerHeight * pct_height / 100;
top_pos = (window.innerHeight - h ) / 2;//help us center this on screen

top_pos += 'px';
};
widget_height = h + 'px';

widget_width = w + 'px';
widget_body_height = ( h - widgetNodeHeader[0].clientHeight - widgetNodeFooter[0].clientHeight ) + 'px';
widgetNodeMain.css({'height': widget_height, 'width': widget_width, 'top': top_pos, 'margin-top': '0px'});//aka div with class " modal-dialog ui-draggable

widgetNodeContent.css({'height': widget_height, 'width': '100%'});//aka div with class "modal-content ui-resizable"

widgetNodeBody.css({'height':widget_body_height, 'width': '100%'}); //aka div with class "modal-body"
}else{

console.log('No, not opened in a popup');

}

}

//================================End Popup Window Resize ==================================;
customPopupSizeController( 65, 90 );//call this function passing in height and width as percentage


C
ChrisOmn 3/26/2019

For future reference, to set Modal Popup window height/width, FunkDaddy's code goes on the 'Javascript OnLoad event' of the popup you want to resize.
The code sets popup dimensions as % of browser window size.
For exact pixel dimensions change:

// w = window.innerWidth pct_width / 100;

// h = window.innerHeight
pct_height / 100;

w = 1100;

h = 600;

John Rotella 3/27/2019



For future reference, to set Modal Popup window height/width, FunkDaddy's code goes on the 'Javascript OnLoad event' of the popup you want to resize.


Thank you.