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

Title:Lightmodal Lightmodal doesn't correctly close

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 ...

Any update on this?

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

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

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.

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

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

Still getting the same error in 6.x-1.11

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;
}

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.

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>

Status:Needs review» Active

.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.

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.

The patch works for me.

Hopefully will make it into the next release!

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).

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 */
}

#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.

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