Question

我有一个菜单栏子菜单需要导航到特定链接。但在导航到链接之前我需要打开一个jquery对话框作为登录表单输入用户名和密码。提交用户名和密码我需要链接到导航到特定目的地..

这里的问题是，在点击子菜单时既不打开jquery对话框登录表单也不导航到特定站点..

这是我的html for menu bar ..

<li><a href="#"><span>Settings</span></a>
            <div><ul>
                    <li><a href="Createuser.jsp" class="loginlink"><span>Create New Account</span></a></li>    
                </ul></div>
</li>

这是我的jquery登录表单...

<a href="/login" style="display:none" class="loginlink">Log In</a>

<div id="loginform" style="display:none">
    <form action="Createuser.jsp" method="post">
        <table>
            <tr>
                <td>User Name:</td>
                <td>
                    <input name="username" id="username" type="text" />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input name="password" id="password" type="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <input type="submit" value="Login" />
                </td>
            </tr>
        </table>
    </form>
</div>

以下是我的document.ready功能..请参阅..

$('a.loginlink').click(function(e) {
            e.preventDefault();
            $('#loginform').dialog('open');
            e.preventDefault();
            return false;
        });

        $('#loginform').dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            draggable: false
        });

Answer 1

首先你的登录链接是display：none ..如果删除它，那部分会让我感到困惑，而不是登录锚点击js你需要做的事情：

 $('a.loginlink').click(function(e) {
        e.preventDefault();
        $('#loginform').show()
        return false;
    });

Jsfiddle demo

Answer 2

您应该尝试使用此示例作为对话框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>

或者显示此链接，例如

http://www.codeproject.com/Tips/622905/Implementation-of-Dialog-Box-using-jQuery-UI-Libra

Answer 3

您正在使用哪个jquery库版本。请确保您导入Jquery UI所需的库

除了anchor标记display:none之外，我没有发现任何问题。

检查此链接

http://jsfiddle.net/HmBmU/5/

单击链接上未打开Jquery对话框

3 个答案: