我的弹出窗体在JSFIDDLE中运行良好,但在我的服务器中无法正常工作。以下代码:
我不会忘记输入<head>
:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.css"></script>
</head>
HTML:
<ul id="topRight-link">
<li><a href="#"> Register </a></li>
<li id="popUp-login"><img src="">Login</li>
</ul>
<div id="login-PopUp-box">
<form class="form" action="#" id="login">
<h3>Login Form</h3>
<label>Username : </label>
<input type="text" id="username" placeholder="john.wick@yahoo.com"/>
<label>password : </label>
<input type="text" id="password" placeholder="************"/>
<input type="button" id="loginbtn" value="Login"/>
<input type="button" id="cancel" value="Cancel"/>
</form>
</div>
CSS:
#login-PopUp-box {
display:none;
}
最后,脚本在这里:
<script type="text/javascript">
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
</script>
这是JSFIDDLE。
服务器和jsfiddle中的代码完全相同。我试图在浏览器中查看源页面,<head>
的文件仍然存在。但它不能在我的服务器上运行。我错过了什么吗?
答案 0 :(得分:1)
$( document ).ready(function() {
console.log( "ready!" );
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
答案 1 :(得分:0)
请将此代码放在下面。替换$(&#34;#login-PopUp-box&#34;)。css(&#34; display&#34;,&#34; block&#34;);
$("#login-PopUp-box").show()
答案 2 :(得分:0)
将您的功能编写如下
<script type="text/javascript">
$(function(){
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
</script>