Всплывающая форма регистрации и регистрации

Привет, у меня есть всплывающая форма входа и регистрации, которая работает почти хорошо. Единственная проблема в моем всплывающем окне - мое всплывающее окно не прокручивается для больших форм. также я не смог остановить прокрутку моего резервного контейнера. Это мой 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 скрипты, CSS и HTML (jsfiddle) jsfiddle ссылка является

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

источник

2015-01-05 Ashish Garg

проверка окончательный демо в соответствии с требованиями 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);

Добавлено переполнение: скрытый в line в

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

и переполнения: "авто" в

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

источник

2015-01-05 08:21:20 dev

Без изменений в выходе ... –

в этом jsfiddle, как только вы открываете модальный, вы не можете прокручивать фон. Это все, что вам нужно? и смените верх: 200 на верх: 0 – dev

Это работает .. для более длинных форм вам просто нужно убедиться, что у вас есть высота или максимальная высота до .popupBody, и ваш внутренний свиток будет работать. – webkit

Я надеюсь, что с помощью следующих решает вашу проблему

.popupContainer{ 
    position:absolute !important; 
    }

Надежда Это решит проблему

источник

2015-01-05 08:36:39

у вас есть изменить незначительные CSS

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

может помочь вам

источник

2015-01-05 08:39:19 priya786

Всплывающая форма регистрации и регистрации

ответ

Смежные вопросы