jquery - How do I explicitly set the height of a login modal? -
i'm working on bootstrap login modal website. on homepage, height of modal normal, picture below.
however, when got nay other page on site , trigger modal link on top, window stretched random size, , can't figure out getting from.
here code modal
<!-- begin login modal --> <div id="login_modal" class="modal hide-on-small" style="width: 500px !important; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;" data-swiftype-index='false'> <div class="account-login clearer"> <div class="page-title"> <h1>login or create account</h1> </div> <form action="/customer/account/loginpost/" method="post" id="login-form"> <div class="new-users grid12-6"> <div class="content"> <h2>new customers</h2> <p>by creating account, you'll able move through checkout process faster, store multiple shipping address, view order, track , redeem reward points!</p> </div> <div class="buttons-set"> <button type="button" title="create account" class="button" onclick="window.location='/customer/account/create/';"><span><span>create account</span></span></button> </div> <p>log in facebook account!</p> <a href="#" onclick="return fblogin();" class="fb_button_ps"><img src="http://www.empowered.org/public/images/fb_login.png"></a> </div> <div class="registered-users grid12-6"> <div class="content"> <h2>registered customers</h2> <p>if have account us, please log in. <br><a href="/customer/account/forgotpassword/">forgot password?</a></p> <ul class="form-list"> <li> <label for="email" class="required"><em>*</em>email address</label> <div class="input-box"> <input type="text" name="login[username]" value="" id="email" class="input-text required-entry validate-email" title="email address" style="width:200px;"> </div> </li> <li> <label for="pass" class="required"><em>*</em>password</label> <div class="input-box"> <input type="password" name="login[password]" class="input-text required-entry validate-password" id="pass" title="password" style="width:200px;"> </div> </li> </ul> </div> <div class="buttons-set"> <button type="submit" class="button" title="login" name="send" id="send2"><span><span>login</span></span></button> </div> </div> </form> </div> </div> <!-- end login modal --> here corresponding css
#signup_modal p { margin-top: 5px; margin-bottom: 5px; } #signup_modal .signup_secondary { margin-top: 10px; margin-bottom: 0; } #signup_modal h2 { color: #f05002; margin: 0; font-weight: 600; } .modal_sub:hover { background-color: #f6f9f2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); border-color: transparent; cursor: hand; cursor: pointer; } .modal_sub_price { margin-left: 16px; } .modal_sub img { margin-bottom: 13px; } .modal_sub span { margin-bottom: 0; } .modal_sub .bulu_btn_signup_mini { margin-bottom: 13px; } .modal { display: none; width: 600px; background: #fff; padding: 15px 30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -o-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; } .modal a.close-modal { position: absolute; top: -12.5px; right: -12.5px; display: block; width: 30px; height: 30px; text-indent: -9999px; background: url(/assets/modal/close.png) no-repeat 0 0; } .modal-spinner { display: none; width: 64px; height: 64px; position: fixed; top: 50%; left: 50%; margin-right: -32px; margin-top: -32px; background: url(/assets/modal/spinner.gif) #111 no-repeat center center; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; } is there way explicitly set height of modal? in advance help!
http://jsfiddle.net/44yua/ fiddle of it. it's missing little styling, rest there.
turns out wasn't bootstrap modal, little tinkering css height property got work.
there conflicting css on other page throwing off. watch stylesheets, man.
Comments
Post a Comment