Resizing jQuery dialogs

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:

 
if(window.innerWidth<=480){
    $('#'+($(this).attr("href"))).dialog( "option", "width", 300 );
    $('#'+($(this).attr("href"))).dialog("option", "position", "center");
}

then to modify the text within so that there is no scrolling need, change the css:

 
div.modal p {
    width: 480px;
    word-break: break-all; /*hyphenate*/
}
@media only screen and (max-width: 480px) {
    div.modal p {
        width: 280px;
        word-break: break-all;
    }
}

I'll be working soon on changing the header size for small screens on my boilerplate and making the dialogs work for ios5.