javascript - Login Pop Up button pops up automatically and won't go directly to login form -
i'm having trouble editing jquery , html make login button pop login form instead of showing login button. reason login button popping on load.
i'm new jquery , i'm posting question after attempting solve problem no avail. if of have answer question please respond changes in code or better update jsfiddle. thank you!
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 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 {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;}
removed method (and small other changes, see demo):
$(document).ready(function () { showmodal(); }); demo: fiddle
Comments
Post a Comment