登錄彈出按鈕自動彈出，不會直接進入登錄表

我無法編輯jQuery和HTML，使登錄按鈕彈出登錄窗體，而不是顯示另一個登錄按鈕。同樣由於某種原因，登錄按鈕在加載時彈出。登錄彈出按鈕自動彈出，不會直接進入登錄表

我是新來的jQuery和我試圖用無濟於事解決這個問題之後發佈的問題。如果您有任何人對我的問題有答案，請回復代碼中的更改，或者更好地更新jsfiddle。謝謝！

HTML：

<div class="container"> 
    <a id="modal_trigger" href="#modal" class="btn">Login</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="action_btns"> 
        <div class="one_half"><a href="#" id="login_form" class="btn">Login</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> 
       </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>

JQUERY：

(function ($) { 
    $.fn.extend({ 
     leanModal: function (options) { 
      var defaults = { 
       top: 100, 
       overlay: 0.5, 
       closeButton: null 
      }; 
      var overlay = $("<div id='lean_overlay'></div>"); 
      $("body").append(overlay); 
      options = $.extend(defaults, options); 
      return this.each(function() { 
       var o = options; 
       var modal_id = $(this).attr("href"); 

       function showModal() { 
        $("#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); 

        $(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); 
       }; 

       $(document).ready(function() { 
        showModal(); 
       }); 

       $(this).click(function (e) { 
        showModal(); 
        e.preventDefault() 
       }) 
      }); 

      function close_modal(modal_id) { 
       $("#lean_overlay").fadeOut(200); 
       $(modal_id).css({ 
        "display": "none" 
       }) 
      } 
     } 
    }) 
})(jQuery); 



$("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" }); 

    $(function(){ 
     // Calling Login Form 
     $("#login_form").click(function(){ 
      $(".social_login").hide(); 
      $(".user_login").show(); 
      return false; 
     }); 

    })

CSS：

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic,400italic); 

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

#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:80px; 
    background: #FFF; 
} 

#modal_trigger {margin:100px auto; width:100px; display:block;} 

.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;}

來源

2015-05-29 ChosenJuan

去除的方法（和一些非常小的其他變化，看到DEMO）：

$(document).ready(function() { 
    showModal(); 
});

DEMO：fiddle

來源

2015-05-29 15:46:46 marcel

太好了，這正是我一直在尋找。我會比較小提琴並不斷學習jquery，謝謝！ – ChosenJuan

您需要正確界定初始顯示，像這樣：

.social_login {display: none;} 
.user_login {display: block;}

但是你應該檢查你的所有代碼，似乎是有很多事情遺留下來。

FIDDLE：https://jsfiddle.net/lmgonzalves/1s3gycd8/1/

來源

2015-05-29 15:44:30 lmgonzalves

登錄彈出按鈕自動彈出，不會直接進入登錄表

回答

相關問題