Question

嗨我在这里使用这段代码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>

Answer 1

您还需要包含jQuery UI。

您发布的jsfiddle使用的文件是CDN hosted script和CDN hosted stylesheet

所以将代码更改为

<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/

的完整代码

如何隔离整个代码..请检查

1 个答案: