javascript - Multiple issues with css/Jquery login modal in wordpress -
modal pops up, out of proportion , size. in fact, form fields displaced outside modal box
i don't see functionality... , example, 2 tabs on top, login/register not clickable
out of despair, tried pasting css code in both, css file , in
<style>tag in header.php file (remember, i'm in wordpress environment..)
after trying 8 hours straight. i'm give up. let me wait... maybe 1 here can figure out
here's code on front page:
<nav class="main-nav"> <ul> <!-- inser more links here --> <li><a class="cd-signin" href="#0">sign in</a></li> <li><a class="cd-signup" href="#0">sign up</a></li> </ul> </nav>here's modal code (placed on wrapper-footer.php)
<div class="cd-user-modal"> <!-- entire modal form, including background --> <div class="cd-user-modal-container"> <!-- container wrapper --> <ul class="cd-switcher"> <li><a href="#0">sign in</a></li> <li><a href="#0">new account</a></li> </ul> <div id="cd-login"> <!-- log in form --> <form class="cd-form"> <p class="fieldset"> <label class="image-replace cd-email" for="signin-email">e-mail</label> <input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="e-mail"> <span class="cd-error-message">error message here!</span> </p> <p class="fieldset"> <label class="image-replace cd-password" for="signin-password">password</label> <input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="password"> <a href="#0" class="hide-password">hide</a> <span class="cd-error-message">error message here!</span> </p> <p class="fieldset"> <input type="checkbox" id="remember-me" checked> <label for="remember-me">remember me</label> </p> <p class="fieldset"> <input class="full-width" type="submit" value="login"> </p> </form> <p class="cd-form-bottom-message"><a href="#0">forgot password?</a></p> <!-- <a href="#0" class="cd-close-form">close</a> --> </div> <!-- cd-login --> <div id="cd-signup"> <!-- sign form --> <form class="cd-form"> <p class="fieldset"> <label class="image-replace cd-username" for="signup-username">username</label> <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="username"> <span class="cd-error-message">error message here!</span> </p> <p class="fieldset"> <label class="image-replace cd-email" for="signup-email">e-mail</label> <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="e-mail"> <span class="cd-error-message">error message here!</span> </p> <p class="fieldset"> <label class="image-replace cd-password" for="signup-password">password</label> <input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="password"> <a href="#0" class="hide-password">hide</a> <span class="cd-error-message">error message here!</span> </p> <p class="fieldset"> <input type="checkbox" id="accept-terms"> <label for="accept-terms">i agree <a href="#0">terms</a></label> </p> <p class="fieldset"> <input class="full-width has-padding" type="submit" value="create account"> </p> </form> <!-- <a href="#0" class="cd-close-form">close</a> --> </div> <!-- cd-signup --> <div id="cd-reset-password"> <!-- reset password form --> <p class="cd-form-message">lost password? please enter email address. receive link create new password.</p> <form class="cd-form"> <p class="fieldset"> <label class="image-replace cd-email" for="reset-email">e-mail</label> <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="e-mail"> <span class="cd-error-message">error message here!</span> </p> <p class="fieldset"> <input class="full-width has-padding" type="submit" value="reset password"> </p> </form> <p class="cd-form-bottom-message"><a href="#0">back log-in</a></p> </div> <!-- cd-reset-password --> <a href="#0" class="cd-close-form">close</a> </div> <!-- cd-user-modal-container --> </div> <!-- cd-user-modal -->and here's css sheet:
/* -------------------------------- xsigin/signup popup -------------------------------- */ .cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0.3s; -moz-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translatey(0); -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); transform: translatey(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #fff; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translatey(-30px); -moz-transform: translatey(-30px); -ms-transform: translatey(-30px); -o-transform: translatey(-30px); transform: translatey(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher:after { content: ""; display: table; clear: both; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher { display: block; width: 100%; height: 50px; line-height: 50px; background: #d2d8d8; color: #809191; } .cd-user-modal-container .cd-switcher a.selected { background: #fff; color: #505260; } @media screen , (min-width: 600px) { .cd-user-modal-container { margin: 4em auto; } .cd-user-modal-container .cd-switcher { height: 70px; line-height: 70px; } } .cd-form { padding: 1.4em; } .cd-form .fieldset { position: relative; margin: 1.4em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form label { font-size: 14px; font-size: 0.875rem; } .cd-form label.image-replace { /* replace text icon */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0; } .cd-form label.cd-username { background-image: url("../img/cd-icon-username.svg"); } .cd-form label.cd-email { background-image: url("../img/cd-icon-email.svg"); } .cd-form label.cd-password { background-image: url("../img/cd-icon-password.svg"); } .cd-form input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-form input.full-width { width: 100%; } .cd-form input.has-padding { padding: 12px 20px 12px 50px; } .cd-form input.has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-form input.has-border:focus { border-color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-form input.has-error { border: 1px solid #d76666; } .cd-form input[type=password] { /* space left hide button */ padding-right: 65px; } .cd-form input[type=submit] { padding: 16px 0; cursor: pointer; background: #2f889a; color: #fff; font-weight: bold; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus { background: #3599ae; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); font-size: 14px; font-size: 0.875rem; color: #343642; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #fff; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* prevent click , touch events */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; -moz-transition: opacity 0.2s 0, visibility 0 0.2s; transition: opacity 0.2s 0, visibility 0 0.2s; } .cd-form .cd-error-message::after { /* triangle */ content: ''; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215, 102, 102, 0.9); } .cd-form .cd-error-message.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0.2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; } @media screen , (min-width: 600px) { .cd-form { max-width: 100%; padding: 2em; } .cd-form .fieldset { max-width: 100%; margin: 2em 0; } .cd-form .fieldset:first-child { max-width: 100%; margin-top: 0; } .cd-form .fieldset:last-child { max-width: 100%; margin-bottom: 0; } .cd-form input.has-padding { max-width: 100%; padding: 16px 20px 16px 50px; } .cd-form input[type=submit] { max-width: 100%; padding: 16px 0; } } .cd-form-message { padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center; } @media screen , (min-width: 600px) { .cd-form-message { padding: 2em 2em 0; } } .cd-form-bottom-message { position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; } .cd-form-bottom-message { color: #fff; text-decoration: underline; } .cd-close-form { /* form x button on top right */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media screen , (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; }you can see on site right how strange opening
first, inputs in modal has inline style width: 1903px; position: relative; margin-left: -951.5px; left: 50%; come from?
the button has same inline style width: 1903px; position: relative; margin-left: -951.5px; left: 50%;
overall seems using lot of inline styling, positioning , z-indexing stuff wan't.
you better of give elements class can reuse , set styling there.
Comments
Post a Comment