Topmost semi transparent Click Through window


While I was learned at college, my UI design was very simple. All labels/edit boxes/combos into one page - OK | CANCEL and done. It was a huge mess.

One of my friend that time said, that this type of GUI design is close to the edge, the edge of terrible (he used different word, but they are unprintable ;). I've redesigned the UI, to a 'wizard like' GUI. Grouped the content and moved to different pages. It was better and more user friendly.

Now, a few years (decades :) later, User eXperience has become even more important to me.

Today developments not just only focus on entering data, they also prioritize a nice appearance of the interface.

This article is a code example of a transparent click through window on Microsoft Windows OS. It could be used as an information or warning dialog, when we do not want to disturb the user or we do not want her/his interaction at all.

(This code could be compiled and run under Linux, but you need a composite manager to get that transparent feature)

This example need Qt's qmake.exe to create build files, but you can also use the source within other IDE.

First we need a frameless dialog, which has a few other attributes, like the following:

  • translucent background - this will add an alpha channel to the widget
  • tool flag - no app icon on the taskbar
  • stay on top

whitin Qt it is really simple:

NotificationlDialog::NotificationlDialog(QWidget *parent) :
    ui(new Ui::NotificationlDialog)

    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool | Qt::WindowStaysOnTopHint);

That's all!

Now we have it, we only have to show it, and hide after a few seconds later...

void MyDialog::on_pushButton_ShowClickThrough_clicked()
    auto dialog = new NotificationlDialog(this);


    QTimer::singleShot(5000, [dialog](){

We do not leave garbage, so we add a parent to our NotificationDialog. It will be destroyed, when MyDialog destructor gets called. We shoot up a simple timer, to close our window after 5 seconds. This line needs Qt 5 new signal-slot syntax like lambda expression as a slot. (in Qt 4 you can also use lambda's in a slot, but you have to pack within a class)

You can download this example source from HERE.

Next I will add a simple fade animation to this example, just for more user satisfaction.


Thanks for visiting.



Click-through semi transparent dialog
Date modified: 
Friday, December 16, 2016 - 20:15
Date published: 
Main entity of page:
C++,Transparent,Click Through,Dialog,Qt,Lambda,Example