Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Popup control in windows8 Metro apps?

I have a metro application in which am trying to design Login-screen for my application.Here I want to design my login-screen like a Microsoft login-screen.I found Popup control in XAML but didn't find in html 5. Is there any special control existed in metro apps.I want to design my login page something like this.

enter image description here Thank you.

<body style="background-color:#1d3665;">
<div class="loginPage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">Welcome to loginPage</span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <table style="position: absolute;background-color:skyblue;">
            <tr>
                <td><input type="text"><br/></td>
            </tr>
            <tr>
            <td>
                 <input type="password"/>
                </td>
            </tr>
        </table>
    </section>
</div>

like image 935
Akil Pandu Avatar asked Oct 08 '12 09:10

Akil Pandu


2 Answers

Use the WinJS.UI.Flyout control. It could be use for confirmation dialogs, login, popups and other. Also, you can set the position at which is showed.

You can read the documentation here. Here you have the Guidelines and checklist. And one example.

like image 123
Brianswer Avatar answered Sep 19 '22 16:09

Brianswer


JavaScript Windows Store Applications don't have access to a built in popup that looks/behaves like the Microsoft Account sign-in dialog.

There is a simple message box experience in Windows.UI.Popups.MessageBox, but it doesn't have the ability to add extra controls etc.

For your experience, you're looking for a modal UI -- to build that you can built it relatively simply yourself (Just add an position: absolute element to the body, and make it fill the screen -- the rest of that elements children / position are in your full control), or as Mayur suggested, use one of the many helper libraries that are out there.

like image 37
Dominic Hopton Avatar answered Sep 22 '22 16:09

Dominic Hopton