Search code examples
windows-8winjs

closing windows ui message popup


I m displaying an popup message for my windows 8 application using javascript like below

var msg = new Windows.UI.Popups.MessageDialog("No internet connection has been found.");
msg.commands.append(new Windows.UI.Popups.UICommand("Try again", commandInvokedHandler));
msg.commands.append(new Windows.UI.Popups.UICommand("Close", commandInvokedHandler));
msg.defaultCommandIndex = 0;
msg.cancelCommandIndex = 1;
msg.showAsync();

Now I want to close the popup message programatically after some timeinterval as the user has not given any input.


Solution

  • I do not think there is a hide/dismiss/cancel command for that kind of message popup. The cancel command is invoked when pressing the escape key on you're keyboard. Thees kinds of messages is not intended for information purpose. You should instead use a "FlyOut".

    HTML:

    <!-- Define a flyout in HTML as you wish -->
    <div id="informationFlyout" data-win-control="WinJS.UI.Flyout">
        <p>
            Some informative text
        </p>
    </div>
    
    <!-- an anchor for the flyout, where it should be displayed -->
    <div id="flyoutAnchor"></div>
    

    JS:

        // Get an anchor for the flyout
        var flyoutAnchor = document.getElementById("flyoutAnchor"); 
    
        // Show flyout at anchor
        document.getElementById("informationFlyout").winControl.show(flyoutAnchor); 
    

    To dismiss the flyout after a set amount of time you could just do a setTimeout and hide in you're code:

    // execute this code after 2000ms
    setTimeout(function () {
    
        // Fetch the flyout
        var flyout = document.getElementById("informationFlyout"); // Get the flyout from HTML
    
        // Check if the element still exists in DOM
        if (flyout) 
            flyout.winControl.hide(); // Dismiss the flyout
    
    }, 2000); 
    

    Read more about the FlyOut-popups here