Adi Adi - 7 months ago 19
Javascript Question

How to open a jquery Dialoge box as login form on clicking a URL from Menu Bar

I have a Menu bar.Now as per my need i have to open a login form as soon as Menu bar menu is clicked ..I have seen opening a Jquery dialogue box with Screen lock as soon as the URL is clicked and if the user has provided the correct Username and Password he will navigate to the required Page else Dialogue Box in Screen Lock will say that Please Enter Correct Username and Password..

Here is my Menu bar link Code in HTML...

<div><ul>
<li><a href="extension.jsp">ExtensionWise</a></li>
<li><a href="calltype.jsp">Call Type</a></li>
</ul></div>


Please help me to achieve This.
Thanks in advance..

UDB UDB
Answer

What you are trying to get is called as modal behaviour where a dialog disables all other elements on the page from being interacted. There are many ui-plugins out there for this but you can also create your own custom div to act in a modal dialog type of behaviour using jQuery and CSS.

html

<div id="box" align="center"></div>

<form>User Name:
    <input type="text" name="firstname" />
    <br/>Password:
    <input type="password" name="pwd" />
    <input type="submit" />
    <button type="button" id="cancel">Cancel</button>
</form>

<a id="login" href="#">Click to Login</a><br/>

<a id="alert" href="#">Click To Alert before and after opening form</a>

script

$(document).ready(function(){

$('#alert').click(function(){alert('alert')})


$('a#login').click(function(){
$("#box,form").fadeIn('slow');
})

$('#cancel').click(function(){
$('#box,form').hide();
})

})

css

div {

width: 100%;
height: 100%;
display:none;
position: absolute;
z-index:100;
background: lightgreen;
opacity: 0.6;
}

form{

position: absolute;
z-index: 101;
display:none;
width: 200px;
border: 2px solid red;
margin-top:50px;
margin-left: 200px;
background: cornflowerblue;

}

Note:- you must put the div and form always as the topmost element in the body

Click here for DEMO