Fixing nyroModal positioning in iOS devices

NyroModal is a JQuery component for showing fancy popups. It has a problem in centering the popup in iOS devices .

The specific problem being that if you have scrolled a few pages and then you click on something which calls a Nyromodal popup , you have to scroll back all the way to the top of the page to see the popup. As a result , either you will either see the top of the popup being cut off or not at all. See image below for an example:

The workaround for this is to call the endShowContent callback function and reposition the popup. The sample code for this is given below:

 $.nyroModalSettings({
              type: 'iframe',
              height: 250,
              width: 520,
              resizable: true,
              autoSizable: true,
              titleFromIframe: true,
              modal: false,
              // selIndicator: '#loading',
              contentLoading: "" // use our own,
			  	,cssOpt: { 
					bg: {
						position: 'absolute',
						overflow: 'hidden',
						top: 0,
						left: 0,
						height: '100%',
						width: '100%'
					},
					wrapper: {
						position: 'relative',
						top: '50%',
						left: '50%'
				    },
					wrapper2: {
				  	},
				    content: {
		   		    },
				    loading: {
					  position: 'absolute',
					  top: '50%',
					  left: '50%',
					  marginTop: '-50px',
					  marginLeft: '-50px'
				    }
				},			  
				endShowContent: function(nm){
                    if( $("div.nyroModalBg").outerHeight() < $(window).outerHeight() ){
                        $("div.nyroModalBg").css("height", $(window).outerHeight());
                    }
                    if ( $("div.nyroModalBg").outerHeight() < $("body").outerHeight() ){
                        $("div.nyroModalBg").css("height", $("body").outerHeight());
                    }
                } // Will be called one the content is resized