Metro app - Pop up window JavaScript

Question

I'm trying to create a Metro app using JavaScript and I can't find a way to create a pop up window.

An example of what I'm trying to do is shown below:

enter image description here

Is there a way to do it using JavaScript (no jQuery)?

I'm trying to use alert but when I hit run in Visual Studio I get the error below:

0x800a1391 - JavaScript runtime error: 'alert' is undefined

JSFIDDLE CODE

HTML:

<body>
    <header>
        <button id="about">About</button>
    </header>
</body>

JAVASCRIPT:

function button(){
    var about = document.getElementById("about");
    about.addEventListener("click", buttonAboutHandler, false);  
}

function buttonAboutHandler(eventinfo) {
    alert("About");
}

http://stackoverflow.com/questions/13652413/what-is-the-alternative-to-alert-in-metro-apps — Ravi Trivedi, May 27 '13 at 02:31

score 2 · Answer 1 · answered May 27 '13 at 02:50

2

First. You need to register your event on window onload that solves your problem, to attach the event of click.

http://jsfiddle.net/Qz5dA/1/

Now to create a dialog without Jquery with pure javascript create div and define your css to create the efect

http://jsfiddle.net/Qz5dA/4/

answered May 27 '13 at 02:50

Jorge

17,896
19
80
126

It doesn't work in my case (Metro app). I think that `alert` is not supported by Metro apps because it is a browser function. – kalpetros May 27 '13 at 03:28
I think that maybe you need to read this http://stackoverflow.com/questions/13652413/what-is-the-alternative-to-alert-in-metro-apps – Jorge May 27 '13 at 03:30

score 2 · Accepted Answer · answered May 27 '13 at 04:24

you can use messageDialogbox class

var messageDialog = new Windows.UI.Popups.MessageDialog(string);

and then display it by using

.showAsync()

method. use this code in your event handeler and whenever the event triggers popup will appear.

var messageDialog = new Windows.UI.Popups.MessageDialog("About", "your text");
messageDialog.showAsync();

reference:MessageDialog Class

Metro app - Pop up window JavaScript

2 Answers2