单击链接时未打开 Jquery 对话框答案

【问题标题】：Jquery Dialog Box is not opening on Clicking Link单击链接时未打开 Jquery 对话框
【发布时间】：2016-05-19 06:26:08
【问题描述】：

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

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

这是我用于菜单栏的 html..

<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
        });

【问题讨论】：

标签： jquery html css jquery-ui-dialog

【解决方案1】：

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

除了你的 anchor 标签有 display:none 之外，我没有看到任何问题。

查看此链接

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

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

Jsfiddle demo

【讨论】：