2

I want the image in my modal dialog to be width:100%, but do not know how to do it.

I'm using this code (thank you Mohamed El-Qassas):

<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'Image',
allowMaximize: false,
showClose: true,
width: 800,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
<a href="#" onclick="openDialog('http://url');"><img src="xxx.png"></a>

My 'openDialog' points to an URL and displays an image. My 'img src' is a thumbnail image.

All is working, but my image is too big for the modal size - I want the image to shrink-to-fit or to be of width:100%, no matter the real size of the image.

screenshot of image too big for modal dialog

2 Answers 2

2

Unfortunately, there is no option to shrink to fit the inside contents in the Modal Popup dialog in SharePoint.

Instead, try to use fancy box jquery modal


But if you need to work with SharePoint Modal, I think the auto size width will be suitable for you!

Just remove the width option width: 800 in the code!

<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'Image',
allowMaximize: false,
showClose: true,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
<a href="#" onclick="openDialog('http://url');"><img src="xxx.png"></a>

Output

enter image description here

Check also at open a SharePoint link via SharePoint Modal

0

Could you just add

width:100% !important;

To the img via css

1
  • Thanks, but that will change all images. It does not seem to have a class the way it is rendered, so I think the best is to get the size done inside the modal code... Sep 26, 2018 at 2:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.