Forum | Appery.io

Two additional questions:

A) Is it possible to center a dialog box vertically on the screen? If so, how?

B) What is the correct JS code for closing a dialog box?

Hi Mike,

To center dialog in height please use this solution:

1 Open your goal dialog page.

2 Add JS "page show" event handler.

3 Populate it with following code:

pre

var dialog = jQuery(".ui-dialog-contain:visible");

var documentHeight = jQuery(document).height();

var height = dialog.height();

var goalHeight = documentHeight / 2 - height / 2;

dialog.css({
"top": goalHeight + "px",
"margin-top": "0"
});

/pre

To close dialog and open next page - please use following JS code:

pre

//Note you should replace "Screen34" with page wich is you want to navigate to.
Apperyio.navigateTo("Screen34");

/pre

Regards.

Yurii,

A) In regards to centering the dialog on the screen, I'm running into the problem of the dialog box shift being visible when the page appears. The dialog pops up (I'm using the "pop" transition) to the top of the screen, then immediately jumps to the middle after the transition has completed. I've tried removing the transition effect but it still does the same thing.

Do you know if there's a way around this?

B) Also, is there a JS code to navigate to the previous page (and not a specific page)?

Thanks

Regards.

Hi Mike in this case you can use following solution:

1. Remove previous solution code.

2. Add new JavaScript asset and populate it with following code:

   pre

   $(document).on('pagebeforeshow', 'div[data-role="page"][data-dialog="true"]', function (e, ui) {

   self.prevPage = ui.prevPage.attr("id");

   var onReady = function(){
   var dialog = jQuery(".ui-dialog-contain:visible");

   Code: Select all

    var documentHeight = jQuery(document).height(); 
   
    var height = dialog.height(); 
   
    var goalHeight = documentHeight / 2 - height / 2; 
   
    dialog.css({ 
        "top": goalHeight + "px", 
        "margin-top": "0" 
    }); 

};

 var onDelay = function(){ 

     var dialog = jQuery(".ui-dialog-contain:visible"); 

     if(dialog.length ) 
         onReady() 
     else 
   window.setTimeout(onDelay, 10); 
 }; 
 onDelay(); 

});

/pre

After you will use the code above you can use following code to navigate previous page when you need:

pre

Apperyio.navigateTo(self.prevPage);

/pre

Regards.

Thanks Yurii