Question

您好我有一个弹出式登录和注册表单，工作得很好。我的弹出窗口中唯一的问题是我的弹出窗口没有向下滚动以查找更大的表单。我也无法停止滚动我的备份容器。这是我的php

    <div class="container">
    <a class="modal_trigger btn" href=".modal"=>Click here to Login or register</a>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>

    <div class="modal 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="#" class="login_form btn">Login</a></div>
                    <div class="one_half last"><a href="#" class="register_form 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 class="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 />

                    <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 class="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>

任何帮助??

使用Jquery Scripts，CSS和HTML（jsfiddle）完成工作插件链接jsfiddle链接

http://jsfiddle.net/ashu398/gw4xrjtk/

Answer 1

根据需要检查最终演示 http://jsfiddle.net/gw4xrjtk/22/

(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("<div class='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$(".lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
$(".lean_overlay").css({"display":"block",opacity:0});$(".lean_overlay").fadeTo(200,o.overlay); $("body").css("overflow","hidden");$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$(".lean_overlay").fadeOut(200);

添加溢出：隐藏在

中

$(".lean_overlay").fadeTo(200,o.overlay); $("body").css("overflow","hidden");

和溢出：

中的“自动”

$(".lean_overlay").fadeOut(200); $("body").css("overflow","auto");

Answer 2

我希望通过使用以下内容解决您的问题

.popupContainer{
    position:absolute !important;
   }

希望这可以解决你的问题

Answer 3

你有改变小css

.popupContainer {
position: absolute;
width: 330px;
height: auto;
left: 45%;
top: 20px;
background: #FFF;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}

可能对你有所帮助

弹出登录和注册表单

3 个答案: