登录弹出窗体在Codepen上工作，但不在我的网站上，甚至不在本地

问题描述 投票：0回答：2

我正在尝试激活登录表单弹出窗口，从Codepen中获取代码：https://codepen.io/anon/pen/NozqZE

它在Codepen上工作得很好，但在我的html项目中却没有。

我试图改变jq库，改变https中的http，加载我在Altervista上的网站，但没有：主页面运行良好，但弹出窗口没有出现。在我看来，JS和Jquery脚本和链接存在问题，但我不知道为什么。

<html>
<head>
<style>
body {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 14px;
        color: #666;
}

h1 {
        text-align: center;
        margin-bottom: 0;
        margin-top: 60px;
}

#lean_overlay {
        position: fixed;
        z-index: 100;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background: #000;
        display: none;
}

.popupContainer {
        position: absolute;
        width: 330px;
        height: auto;
        left: 45%;
        top: 60px;
        background: #FFF;
}

#modal_trigger {
        margin: 40px auto;
        width: 200px;
        display: block;
        border: 1px solid #DDD;
        border-radius: 4px;
}

.btn {
        padding: 10px 20px;
        background: #F4F4F2;
}

.btn_red {
        background: #ED6347;
        color: #FFF;
}

.btn:hover {
        background: #E4E4E2;
}

.btn_red:hover {
        background: #C12B05;
}

a.btn {
        color: #666;
        text-align: center;
        text-decoration: none;
}

a.btn_red {
        color: #FFF;
}

.one_half {
        width: 50%;
        display: block;
        float: left;
}

.one_half.last {
        width: 45%;
        margin-left: 5%;
}
/* Popup Styles*/

.popupHeader {
        font-size: 16px;
        text-transform: uppercase;
}

.popupHeader {
        background: #F4F4F2;
        position: relative;
        padding: 10px 20px;
        border-bottom: 1px solid #DDD;
        font-weight: bold;
}

.popupHeader .modal_close {
        position: absolute;
        right: 0;
        top: 0;
        padding: 10px 15px;
        background: #E4E4E2;
        cursor: pointer;
        color: #aaa;
        font-size: 16px;
}

.popupBody {
        padding: 20px;
}
/* Social Login Form */

.social_login {}

.social_login .social_box {
        display: block;
        clear: both;
        padding: 10px;
        margin-bottom: 10px;
        background: #F4F4F2;
        overflow: hidden;
}

.social_login .icon {
        display: block;
        width: 10px;
        padding: 5px 10px;
        margin-right: 10px;
        float: left;
        color: #FFF;
        font-size: 16px;
        text-align: center;
}

.social_login .fb .icon {
        background: #3B5998;
}

.social_login .google .icon {
        background: #DD4B39;
}

.social_login .icon_title {
        display: block;
        padding: 5px 0;
        float: left;
        font-weight: bold;
        font-size: 16px;
        color: #777;
}

.social_login .social_box:hover {
        background: #E4E4E2;
}

.centeredText {
        text-align: center;
        margin: 20px 0;
        clear: both;
        overflow: hidden;
        text-transform: uppercase;
}

.action_btns {
        clear: both;
        overflow: hidden;
}

.action_btns a {
        display: block;
}
/* User Login Form */

.user_login {
        display: none;
}

.user_login label {
        display: block;
        margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
        display: block;
        width: 90%;
        padding: 10px;
        border: 1px solid #DDD;
        color: #666;
}

.user_login input[type="checkbox"] {
        float: left;
        margin-right: 5px;
}

.user_login input[type="checkbox"]+label {
        float: left;
}

.user_login .checkbox {
        margin-bottom: 10px;
        clear: both;
        overflow: hidden;
}

.forgot_password {
        display: block;
        margin: 20px 0 10px;
        clear: both;
        overflow: hidden;
        text-decoration: none;
        color: #ED6347;
}
/* User Register Form */

.user_register {
        display: none;
}

.user_register label {
        display: block;
        margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
        display: block;
        width: 90%;
        padding: 10px;
        border: 1px solid #DDD;
        color: #666;
}

.user_register input[type="checkbox"] {
        float: left;
        margin-right: 5px;
}

.user_register input[type="checkbox"]+label {
        float: left;
}

.user_register .checkbox {
        margin-bottom: 10px;
        clear: both;
        overflow: hidden;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
        top: 100,
        overlay: 0.6,
        closeButton: ".modal_close"
});
$(function() {
        // Calling Login Form
        $("#login_form").click(function() {
                $(".social_login").hide();
                $(".user_login").show();
                return false;
        });

        // Calling Register Form
        $("#register_form").click(function() {
                $(".social_login").hide();
                $(".user_register").show();
                $(".header_title").text('Register');
                return false;
        });

        // Going back to Social Forms
        $(".back_btn").click(function() {
                $(".user_login").hide();
                $(".user_register").hide();
                $(".social_login").show();
                $(".header_title").text('Login');
                return false;
        });
});
</script>
<div class="container">
        <h1>Popup Login & Signup with jQuery</h1>
        <a id="modal_trigger" href="#modal" class="btn">Click here to Login or register</a>
        <div id="modal" class="popupContainer" style="display:none;">
                <header class="popupHeader">
                        <span class="header_title">Login</span>
                        <span class="modal_close"><i class="fa fa-times"></i></span>
                </header>
                <section class="popupBody">
                        <!-- Social Login -->
                        <div class="social_login">
                                <div class="">
                                        <a href="#" class="social_box fb">
                                                <span class="icon"><i class="fa fa-facebook"></i></span>
                                                <span class="icon_title">Connect with Facebook</span>
                                        </a>
                                        <a href="#" class="social_box google">
                                                <span class="icon"><i class="fa fa-google-plus"></i></span>
                                                <span class="icon_title">Connect with Google</span>
                                        </a>
                                </div>
                                <div class="centeredText">
                                        <span>Or use your Email address</span>
                                </div>
                                <div class="action_btns">
                                        <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
                                        <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
                                </div>
                        </div>
                        <!-- Username & Password Login form -->
                        <div class="user_login">
                                <form>
                                        <label>Email / Username</label>
                                        <input type="text" />
                                        <br />

                                        <label>Password</label>
                                        <input type="password" />
                                        <br />

                                        <div class="checkbox">
                                                <input id="remember" type="checkbox" />
                                                <label for="remember">Remember me on this computer</label>
                                        </div>

                                        <div class="action_btns">
                                                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                                                <div class="one_half last"><a href="#" class="btn btn_red">Login</a></div>
                                        </div>
                                </form>

                                <a href="#" class="forgot_password">Forgot password?</a>
                        </div>
                        <!-- Register Form -->
                        <div class="user_register">
                                <form>
                                        <label>Full Name</label>
                                        <input type="text" />
                                        <br />

                                        <label>Email Address</label>
                                        <input type="email" />
                                        <br />

                                        <label>Password</label>
                                        <input type="password" />
                                        <br />

                                        <div class="checkbox">
                                                <input id="send_updates" type="checkbox" />
                                                <label for="send_updates">Send me occasional email updates</label>
                                        </div>

                                        <div class="action_btns">
                                                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                                                <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div>
                                        </div>
                                </form>
                        </div>
                </section>
        </div>
</div>
</body>
</html>
jquery modal-dialog codepen
2个回答
0
投票

请从http://leanmodal.finelysliced.com.au/下载leanModal lib，在jquery脚本标记后包含leanModal脚本库，并将JS移动到页脚部分。

0
投票

将jquery代码移动到$(document).ready

当调用$("#modal_trigger")时，它将返回空数组，因为html尚未呈现#modal_trigger id。此外，似乎你还没有包括leanModal源文件

Codepen将所有内容包装在document.ready中，这应该是它在那里工作的原因

如果你有疑问，请在调用console.log($("#modal_trigger"))之前做leanmodal

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.