<a href="login.php">login</a>

i want to replace this so that i have a metro ui login box within the same page as a drop down. this is the metro code.
what js files should i add?


$("#createFlatWindow".on('click', function(){
$.Dialog({
overlay: true,
shadow: true,
flat: true,
icon: '<img src="images/excel2013icon.png">',
title: 'Flat window',
content: '',
padding: 10,
onShow: function(_dialog){
var content = '<form>' +
'<label>Login</label>' +
'<div class="input-control text"><input type="text" name="login">
<button class="btn-clear"></button></div> ' +
'<label>Password</label>' +
'<div class="input-control password">
<input type="password" name="password">
<button class="btn-reveal"></button></div> ' +
'<div class="input-control checkbox">
<label><input type="checkbox" name="c1" checked/>
<span class="check"></span>Check me out</label></div>'+
'<div class="form-actions">' +
'<button class="button primary">Login to...</button> '+
'<button class="button" type="button" onclick="$.Dialog.close()">Cancel</button> '+
'</div>'+
'</form>';

$.Dialog.title("User login";
$.Dialog.content(content);
$.Metro.initInputs();
}
});
});

you can hide the form using jquery show() on the form hide. use css to set the display to none.

then use a button to show the form.

that is

$(document).ready(function(){

$("#btn_id".click(function(){

$("#form_id".show(speed, callback function);

});

});

Make sure you point to jquery in your head of your document .



Contact me on :

Mobile: 08133884165

WhatsApp: 08133884165

BBM: 2BB63350

Am a website developer skilled in languages as: HTML/HTML5, CSS/CSS3, PHP, MYSQL, Javascript/Jquery,JqueryMobile,Bootstrap Ajax.
phpquard

CMS (Wordpress, Joomla, Opencart, Magento, Whmcs, Drupal and Pulse Cms, blogger ).

thanks ,I solved the problem.It was the jqueries conflicting and making things hard.

Happy for you. Happy coding!