0

I'm having a bit of an issue with YJ Pop login for some reason.

On the following page, when I click login in the top right, the modal pop's up no problem. However, even when the modal is hidden, it seems the container is still over the content underneath.

For example, if you attempt to click on the link 'Event 1 - March 21' next to the 'Welcome to our portal section', the link is not accessible due to the modal container. However, you can click 'Event 1 - March 28' as the modal does not cover this section.

I have tried altering some z-index values to no avail, there is also some customisations in the popup:

    #login_pop, #reg_pop {
    z-index:0;
}
.modal-backdrop, .modal-backdrop.fade.in, #myModal, .modal-dialog {
    z-index:0;
}   
.login_cus .modal-dialog {
    position: absolute;
}
.login_cus .modal-dialog {
    width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -220px 0 0 -200px;
    background:#FFFFFF;
    z-index:0;
}
.module.login .modal-dialog {
    position: absolute!important;
}
.login_cus .modal-body {
    width:85%;
}
.login_cus form {
    font-size:100%;
}
.login_cus input {
    width:80%;
    margin:auto;
}
.login_cus .modal-header {
    border: none;
}
.login_cus .modal-dialog .close {
    color: #292f38;
    font-size: 36px;
    opacity: 1;
}
.login_cus span.title {
    font-size: 20px;
    display: block;
    padding-top: 10px;
    padding-left: 14px;
}
.login_cus .modal-body {
    padding: 0 30px;
}
.login_cus.fleft.log label {
    font-weight: 300;
    font-size: 14px;
}
.login_cus.wrapper2 {
    width: 100%;
    clear: both;
}   
.button-log .Forgot {
    float: right;
    margin: -10px 0 0 0;
    padding: 0;
    list-style: none;
}
.button-log button {
    font-size:100%;
}
.create_customer {
    background: #ecf0f1;
    padding: 22px 30px;
    margin-left: -30px;
    margin-right: -30px;
    border-radius: 0 0 6px 6px;
}
.button-log {
    padding-top: 20px;
    padding-bottom: 30px;
}
.create_customer span {
    font-size: 20px;
    display: inline-block;
    padding-right: 18px;
}

Modal issue link

I can't seem to figure out what is going on, does anyone have any suggestions?

Thank you in advance.

Donna

  • Your modal should be set to display: none; when it's not in use. – Lodder Mar 20 at 17:08
  • @lodder Where would this be set, I've taken a modified version of the module from another of my sites, so would this be set in the JS maybe? – Dtorr1981 Mar 21 at 9:51
  • 1
    Just in the CSS – Lodder Mar 21 at 10:14
  • Adding display:none; prevents the modal appearing when the login link is clicked. – Dtorr1981 Apr 1 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.