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.
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>
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With