单击菜单栏上的URL时如何打开jQuery对话框作为登录表单 [英] How to open a jQuery dialog box as login form on clicking a URL from menu bar

问题描述

我有一个菜单栏.现在，根据我的需要，一旦单击菜单栏菜单，我就必须打开一个登录表单.我已经看到单击URL就会立即打开带有屏幕锁定的jQuery对话框，如果用户提供了正确的用户名和密码，他将导航到所需页面，否则屏幕锁定对话框将显示请输入正确的用户名并密码".

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".

这是我的HTML菜单栏链接代码.

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>

推荐答案

您试图获得的结果称为modal行为，其中对话框禁止页面上的所有其他元素进行交互.为此，有很多ui插件，但是您也可以创建自己的自定义div，以使用jQuery和CSS来表现modal对话框类型的行为.

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>

脚本

$(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;

}

注意:-，您必须始终将div和form放置为正文中的最高元素

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

点击此处查看演示

这篇关于单击菜单栏上的URL时如何打开jQuery对话框作为登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！