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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s