I have a quick way of producing dialogs by specifying class=”modal” with a href=”the modal id”, and a div with class=”modal” and id=”the modal id”.

View the demo

What was annoying me is that when the page was resized to a small screen it wasn’t displaying the dialog well. The dialog itself was too big and wasn’t centred.

Add this script after the dialog opening to change the width and recenter for smaller windows:


Kim Debling is a Hampshire, UK based designer and Director of her own company Kestrel Design Ltd. She is mum to Rose and Harvey and wife to her best friend Steve. ¬†She’s fighting off Stage 4 Lymphoma and sharing her story along the way, mainly via YouTube. Kim is passionate about being happy, mental wellbeing and in particular art and creative pursuits as therapy during tough times. She teaches online at Udemy, has published books and has art and printables available for sale.

Resizing jQuery dialogs was last modified: April 30th, 2015 by Kim Debling