弹出表单失败，但在 JsFiddle 中，它可以工作

PopUp Form failed but in JsFiddle, it works

本文关键字：工作 但在 表单 失败 JsFiddle      更新时间：2023-09-26

我的弹出表单在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>的文件保留在那里。但它在我的服务器中不起作用。我错过了什么吗？

JSfiddle 正在添加带有 onload 的 JS - 所以这应该可以工作 - 

$( document ).ready(function() {
    console.log( "ready!" );
    $("#popUp-login").click(function() {
        $("#login-PopUp-box").css("display", "block");
    });
});

按如下方式编写函数 

<script type="text/javascript">
    $(function(){
         $("#popUp-login").click(function() {
            $("#login-PopUp-box").css("display", "block");
        });
    });
</script>

只需将此代码放在下面即可。替换您的 $（"#login-弹出框"）.css（"显示"、"块"）;

$("#login-PopUp-box").show()
相关文章：