Adi Adi - 5 months ago 6x
Javascript Question

How to open a jQuery dialog 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 dialog 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 dialog box in screen Lock will say "Please Enter Correct Username and Password".

Here is my menu bar link code in HTML.

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


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.


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

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

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

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








div {

width: 100%;
height: 100%;
position: absolute;
background: lightgreen;
opacity: 0.6;


position: absolute;
z-index: 101;
width: 200px;
border: 2px solid red;
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