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.

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

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

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>

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

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!

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!

The patch really works for D7, but unfortunately it still doesn't allow to close the lightmodal window using keyboard shortcuts.

To enable closing the modal with keyboard, just comment out the lines

    // Don't enable keyboard shortcuts so forms will work.
//    if (!Lightbox.isModal) {
      this.enableKeyboardNav();
//    }

(only in case you don't use lightmodal for forms of course).