Question

我有一个菜单栏。现在根据我的需要，我必须在点击菜单栏菜单后立即打开登录表单。我看到一旦点击URL就打开一个带有屏幕锁定的jQuery对话框，如果用户提供了正确的用户名和密码，他将导航到屏幕中所需的页面其他对话框.Lock会说“请输入正确的用户名和密码”。

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

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

Answer 1

您尝试获取的内容称为modal行为，其中对话框禁用页面上的所有其他元素进行交互。有很多用于此的ui-plugins，但您也可以创建自己的自定义div，以使用jQuery和CSS在modal对话框行为中执行。

<强> 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始终作为正文中最顶层的元素

Click here for DEMO

如何在单击菜单栏中的URL时打开jQuery对话框作为登录表单

1 个答案: