How to Resize the window.showModelDialog after load of dialog.

Recently I got the requirement where, I had to show the Model dialog in small size and as per some conditions i need to adjust the size of the dialog, for that we need to use below

Resize function or dialogWidth and dialogHeight properties.

In other words dialogWidth and dialogHeight properties can help to adjust the width and height of the dialog. but if we need to do it in percentile increment then first we need to get the previous values and then do the addition and deletion in height and width.

 

Parent Page

<!DOCTYPE html>

<html>

<head>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

</head>

<body>

<p>Click the button to open a new browser window.</p>

<button onclick=”myFunction()”>Try it</button>

function myFunction() {

window.showModalDialog(“./dialog.html”, “”, “dialogWidth:600px; dialogHeight:400px; center:yes; resizable:no”);

}

</body>

</html>

Dialog Html

<!DOCTYPE html>

<html>

<head>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

$(document).ready(function(){

$(window).resize(function() {

window.dialogWidth = $(window).width() * 2;

window.dialogWidth = $(window).height() * 2;

});

$(window).trigger(‘resize’);

});

</head>

<body>

<p>Open a new window, and resize the width and height to 500px:</p>

</body>

</html>

or try this below html on demand height and width setting.

 

<!DOCTYPE html>

<html>

<head>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

function ResizeNow(){

window.dialogWidth = $(window).width() * 2;

window.dialogWidth = $(window).height() * 2;

}

</head>

<body>

<button onclick=”ResizeNow()”>Resize Now</button>

<p>Open a new window, and resize the width and height to 500px:</p>

</body>

</html>

How to Resize the window.showModelDialog after load of dialog.

Recently I got the requirement where, I had to show the Model dialog in small size and as per some conditions i need to adjust the size of the dialog, for that we need to use below

Resize function or dialogWidth and dialogHeight properties.

In other words dialogWidth and dialogHeight properties can help to adjust the width and height of the dialog. but if we need to do it in percentile increment then first we need to get the previous values and then do the addition and deletion in height and width.

 

Parent Page

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
</head>
<body>

<p>Click the button to open a new browser window.</p>

<button onclick=”myFunction()”>Try it</button>

function myFunction() {
window.showModalDialog(“./dialog.html”, “”, “dialogWidth:600px; dialogHeight:400px; center:yes; resizable:no”);
}

</body>
</html>

Dialog Html

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

$(document).ready(function(){

$(window).resize(function() {
window.dialogWidth = $(window).width() * 2;
window.dialogWidth = $(window).height() * 2;
});

$(window).trigger(‘resize’);

});

</head>
<body>

<p>Open a new window, and resize the width and height to 500px:</p>

</body>
</html>

or try this below html on demand height and width setting.

 

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

function ResizeNow(){

window.dialogWidth = $(window).width() * 2;
window.dialogWidth = $(window).height() * 2;
}

</head>
<body>
<button onclick=”ResizeNow()”>Resize Now</button>
<p>Open a new window, and resize the width and height to 500px:</p>

</body>
</html>