Bug #2167

WDialog z-index ordering [3.3.1rc1]

Added by Roman Puls almost 9 years ago. Updated over 7 years ago.

Target version:
Start date:
Due date:
% Done:


Estimated time:


When creating WDialogs, the latest created dialog instance will overlap all other dialogs, and there's no way in bringing a dialog from the back to the front.

The Rocket-Launch example from the widget gallery shows this issue (create two or more dialogs).

My brute-force attempt to solve this via javascript/jQuery did not work (yet), but this is probably the rough direction to go?

WDialog *dlg = new WDialog("Dialog Example", content());
dlg->titleBar()->clicked().connect(std::bind([=](const WMouseEvent &mouseEvent) {
    const std::string id = dlg->id();

    std::cout << format("dialog %s has been clicked", id) << std::endl;
    std::string query = format("$('#%s').parent().append($('#%s'));", id, id);
}, std::placeholders::_1));

Also, windows should probably come to the front not only by clicking the dialog-toolbar, but also when clicking any area of the dialog.

If I can help out, please let me know.



PS: Example html attached which shows how to pop a div to the front.

PPS: I am using tinyformat for format-like operations


divtest.html (916 Bytes) divtest.html bring-to-front example with div's Roman Puls, 08/30/2013 09:34 AM
jquery.js (267 KB) jquery.js jQuery.js needed for the example Roman Puls, 08/30/2013 09:34 AM

Updated by Will Johnson almost 9 years ago

The code I use to get done what I think you want is bellow. It just defines a javascript function that gets called when you click on the titlebar, and then checks to make sure the z-index is higher than all other WDialogs, and if not, it makes it higher. It seems to work well.

(BringToFront, Wt::JavaScriptFunction, "BringToFront",
 function( id )
  var maxz = 0;
  $('.Wt-dialog').each( function(index, value){ maxz = Math.max(maxz,$(value).css('z-index')); } );
  if( maxz > $('#'+id).css('z-index') )

void foo()
  LOAD_JAVASCRIPT(wApp, "file.cpp", "Class", wtjsBringToFront);
  WDialog *dialog = new WDialog( "My Title" );
  dialog->titleBar()->clicked().connect( "function(){Wt.WT.BringToFront('" + dialog->id() + "');}" );
  //and similar connections for mouse down and touch events

hope it helps.


Updated by Koen Deforche over 8 years ago

  • Target version changed from 3.3.1 to 3.3.2

Updated by Koen Deforche over 8 years ago

  • Status changed from New to InProgress
  • Assignee set to Koen Deforche
  • Target version changed from 3.3.2 to 3.3.3

Updated by Koen Deforche about 8 years ago

  • Target version changed from 3.3.3 to 3.3.4

Updated by Koen Deforche over 7 years ago

  • Status changed from InProgress to Resolved

Updated by Koen Deforche over 7 years ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF