0

嗨，我在这里使用此代码http://jsfiddle.net/bryanjamesross/pyNJ9/我将整个代码隔离在一页中..就像这个标签下的 javascript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>

和下的css代码

<script type="text/css"> 
 </script>

并在 html 标签中使用了 html 代码。但我也得到了文本框，而不是单个登录 href 链接。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$('a.loginlink').click(function(e) {
    $('#loginform').dialog('open');
    e.preventDefault();
    return false;
});

$('#loginform').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false
});
</script>
</head>
<body>
<a href="mytest.html" class="loginlink">Log In</a>

<div id="loginform">
    <form action="/login" method="post">
        <table>
            <tr>
                <td>User Name:</td>
                <td>
                    <input name="username" type="text" />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input name="password" type="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <input type="submit" value="Login" />
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
4

1 回答 1

1

您还需要包含jQuery UI。

您发布的 jsfiddle 使用的文件是CDN 托管脚本和CDN 托管样式表

所以将您的代码更改为

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
</script>

并在您的页面头部添加

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" />

更新

重要您需要将代码包装起来，$(function(){ ... })以便在加载 DOM 后运行。

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

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

并确保您的 jquery 版本与 jquery UI 版本使用兼容

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

代替

<script type="text/javascript" src="jquery.js"></script>

完整代码在http://jsfiddle.net/gaby/k6KjS/

于 2012-04-10T11:40:56.297 回答