Heya folks,

Clicking aside (read: left or right) a lightmodal doesn't close it. This is due to the width: 100% property in the #lightbox css class. When one disables this property with Firebug, clicking aside the lightmodal does work. This property can't be replaced with margin: 0 auto as the lightmodal is absolutely positioned.

Is there any fix for this? In my oppinion, this is a somewhat major problem seen from the useability point of view.

Thanks

Files: 
CommentFileSizeAuthor
#14 lightmodal_close-978660-14.patch748 bytessxnc

Comments

Anonymous’s picture

Title:Lightmodal » Lightmodal doesn't correctly close
KoCo’s picture

So far, I have this only with the login pop-up. My photo albums work great.
Both have the 100% css setting, so it isn't that, by itself at least.
But the close button also doesn't work for the login popup.
investigating ...

fenda’s picture

Any update on this?

cristian.stoica’s picture

Subscribing. Close button doesn't work for the login popup.

roxy317’s picture

Subscribing. Close button and keyboard shortcuts do not close login popup.

Anonymous’s picture

Status:Active» Needs review

That is because the photoalbum probably is a lightBOX. A login popup is most likely a lightMODAL. The problem lies in the handling of lightmodals... But where? Beats me.

Would be interesting if a Lightbox developer reviewed this.

rumblewand’s picture

subscribing - issue exists with Lightbox 2 as well using the out-of-the-box contact modal

mshepherd’s picture

Version:6.x-1.9» 6.x-1.11

Still getting the same error in 6.x-1.11

mshepherd’s picture

Looks like it's a z-index problem. I've fixed it with this CSS in my theme, but I guess this should be part of the module?

.lightmodal-login #frameHoverNav {
  z-index: -1 !important;
}
Anonymous’s picture

Doesn't look like this is working here. I tried this style on a few lightbox elements, but setting that z-index just sends the element to the back. Which html element are you applying .lightmodal-login #frameHoverNav to? I don't have a #frameHoverNav.

mshepherd’s picture

This is the html my version of lightbox2 generates. #frameHoverNav is down towards the bottom. I guess this isn't relevant to the modal login box. It sounds like it's part of the image navigation that shouldn't be displayed here. Maybe setting it to display: none would work too, even fot he whole of #imageData

    <div class="lightbox2-orig-layout lightmodal-login" style=
    "z-index: 10500; top: 64.9px; left: 0px;" id="lightbox">
      <div id="outerImageContainer" style=
      "background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); width: 270px; height: 230px; display: block;">
      <div style=
      "display: block; padding: 10px; width: 250px; height: 210px; z-index: 10500;"
        id="modalContainer">
          <form id="user-login-form" method="post" accept-charset="UTF-8"
          action="/user/login/lightbox2?destination=" name="user-login-form">
            <div>
              <div id="edit-name-wrapper" class="form-item">
                <label for="edit-name">Username: <span title=
                "This field is required." class=
                "form-required">*</span></label> <input type="text" class=
                "form-text required" value="" size="15" id="edit-name" name=
                "name" maxlength="60" style=
                "background-image: url(...); padding-right: 18px; background-repeat: no-repeat; background-attachment: scroll; background-position: right center; border: 1px solid rgb(192, 31, 47); width: 106px;">
                </div>
              <div id="edit-pass-wrapper" class="form-item">
                <label for="edit-pass">Password: <span title=
                "This field is required." class=
                "form-required">*</span></label> <input type="password" class=
                "form-text required" size="15" maxlength="60" id="edit-pass"
                name="pass" style=
                "background-image: url(...); padding-right: 18px; background-repeat: no-repeat; background-attachment: scroll; background-position: right center; border: 1px solid rgb(192, 31, 47); width: 106px;">
                </div><input type="submit" class="form-submit" value="Log in"
                id="edit-submit" name="op">
              <div class="item-list"></div><input type="hidden" value=
              "form-6160a92813e7dad0c7c0c88d7737b687" id=
              "form-6160a92813e7dad0c7c0c88d7737b687" name="form_build_id">
              <input type="hidden" value="user_login_block" id=
              "edit-user-login-block" name="form_id">
            </div>
          </form>
        </div>
        <div style="display: none; padding: 10px;" id="frameContainer"></div>
        <div style="display: none; padding: 10px;" id="imageContainer">
          <img alt="" id="lightboxImage" style="display: none;" name=
          "lightboxImage">
          <div id="hoverNav" style="display: none; z-index: 10500;">
            <a href="#" title="Previous" id="prevLink" style=
            "padding-top: 10px; display: none; height: 210px;" class=
            "force_show_nav" name="prevLink"></a><a href="#" title="Next" id=
            "nextLink" style="padding-top: 10px; display: none; height: 210px;"
            class="force_show_nav" name="nextLink"></a>
          </div>
        </div>
        <div id="loading" style="z-index: 10500; display: none;">
          <a id="loadingLink" href="#" name="loadingLink"></a>
        </div>
      </div>
      <div class="clearfix lightbox2-alt-layout-data" id="imageDataContainer"
      style=
      "background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); display: block; width: 270px;">
      <div id="imageData">
          <div id="imageDetails">
            <span id="caption" style="z-index: 10500;">For authorised users
            only</span><span id="numberDisplay" style="display: none;"></span>
          </div>
          <div id="bottomNav">
            <div id="frameHoverNav" style="display: block; z-index: 10500;">
              <a href="#" title="Previous" id="framePrevLink" style=
              "padding-top: 10px; display: none;" name=
              "framePrevLink"></a><a href="#" title="Next" id="frameNextLink"
              style="padding-top: 10px; display: none;" name=
              "frameNextLink"></a>
            </div><a href="#" title="Close" id="bottomNavClose" style=
            "background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" name=
            "bottomNavClose"></a><a href="#" id="bottomNavZoom" style=
            "display: none;" name="bottomNavZoom"></a><a href="#" id=
            "bottomNavZoomOut" style="display: none;" name=
            "bottomNavZoomOut"></a><a style="display: none;" href="#" title=
            "Pause Slideshow" id="lightshowPause" name=
            "lightshowPause"></a><a style="display: none;" href="#" title=
            "Play Slideshow" id="lightshowPlay" name="lightshowPlay"></a>
          </div>
        </div>
      </div>
    </div>
dberror’s picture

Status:Needs review» Active
dberror’s picture

.lightmodal-login #frameHoverNav {
  z-index: -1 !important;
}

and

.lightmodal-login #frameHoverNav {
  display: none !important;
}

both worked fine for me, thanks mshepherd.

But it's not a real solution.

sxnc’s picture

Version:6.x-1.11» 6.x-1.x-dev
Status:Active» Needs review
StatusFileSize
new748 bytes

Had the same issue today and managed to fix it, for lightmodal there was a "$('#lightbox').unbind('click');" which also appears for other options like images and so on but they rebind the #lightbox right after that.

Cablestein’s picture

The patch works for me.

Hopefully will make it into the next release!

xamount’s picture

Version:6.x-1.x-dev» 7.x-1.x-dev
Priority:Major» Critical
Status:Needs review» Needs work

This patch did not work for me (using Drupal 7).

lrolando’s picture

When changing the width of the div #lightbox (from 100% to a static width), we faced the problem that we couldn't center it correctly.

We decided to use some dirty css tricks and hardcoded widths to fix this problem until a solution is posted. This is the css used:

#lightbox {
  width: 790px; /* width of the lightmodal in our site */
  left: 50% !important;
  margin-left: -395px; /* half the width of our lightmodal */
}
imading’s picture

#16 xamount
In fact, you can read the code inside the patch. And add/remove the code required.
In this case, it is "lightbox.js".
and simply find the lines affected and + - the lines.

nindroidx’s picture

The patch still works in Drupal 7 (applied with Netbeans), Thanks!