JQuery UI Dialog not opening in iPad but opening fine in Browsers

Question

The JQuery UI Dialog not opening in iPad. I am not sure if it will open second time or not as I can't refresh the page.

Here is what I am doing.

    $(document).ready(function() {
                $('#dialog').dialog({autoOpen: false, resizable: false, modal: true});

                $('body').append('<div id="popup" style="overflow: hidden; padding: 5px; background-color: #ffffff;"></div>');
                $('#popup').dialog({
                        autoOpen: false, 
                        resizable: false, 
                        draggable: false, 
                        width: 720,
                        modal: true,
                        open: function(event, ui) {
                            $('.ui-dialog').css('z-index', 10001);
                            $('.ui-widget-overlay').css('z-index', 10000);
                        },
                        close: function(event, ui) { 
                            $(this).dialog('destroy').remove(); 
                        },
                        position: {
                            my: 'top',
                            at: 'top+10%',
                            of: window
                        },
                        title: "Instructions"
                    }).html('<img id="ins-image" src="images/Instructions.png" width="700" height="472"></img>').dialog('open');
)};

Here is my Fiddle

http://jsfiddle.net/zNVq8/

Answer 1

try with this i have use this and its working fine with browsers and ipad , iphone aslo android

 $("<div id='DialogPopup'></div>")
            .dialog({
                title: resetPassTitle,
                resizable: true,
                dialogClass: "no-close",
                position: { my: "center", at: "center", of: "#myTab" },
                show: {
                    effect: "scale",
                    duration: 500
                },
                hide: {
                    effect: "clip",
                    duration: 500
                },
                close: function () {
                    $(this).remove();
                },
                modal: true,
                width: ($(window).width() <= 720) ? 250 : 500
            })
        .load('/mycontroller/ResetPassword?contactID=' + id + '&userName=' + UserName + '');