Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<a data-dismiss="modal" data-toggle="modal"> doesn't work #17956

Closed
phpcoder opened this issue Oct 17, 2015 · 13 comments
Closed

<a data-dismiss="modal" data-toggle="modal"> doesn't work #17956

phpcoder opened this issue Oct 17, 2015 · 13 comments
Labels

Comments

@phpcoder
Copy link

@phpcoder phpcoder commented Oct 17, 2015

When a new modal is opened by a trigger element within the already opened modal (and close the opened one), new and all subsequent modals loose the ability to scroll, instead a background is being scrolled.
It is similar to the earlier discussed issue #7501
Such behaviour is noticed in bootstrap 3.5.5 but exists since 3.0.0. Browsers tested were Crome (37.0.2062.124) and Safari (6.2.8) in os x 10.8.

To reproduce the issue a handy example was found at http://jsbin.com/venek/1/edit
Screen size should be adjusted so that the opened modal goes behind its bottom edge.
The used in the example bootstrap version 3.2.0 works fine, but changing in the code bootstrap cs and js to anything above 3.0.0 produces the described behaviour.

Last note: when a modal is opened, normally a BODY element is given a class "modal-open".
However, in versions > 3.0.0 the second and all subsequent modals opened within the first one the BODY element looses the "modal-open" class. That is the reason for the issue.

@twbs-lmvtfy

This comment has been minimized.

Copy link

@twbs-lmvtfy twbs-lmvtfy commented Oct 17, 2015

Hi @phpcoder!

You appear to have posted a live example (http://jsbin.com/venek/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 52, column 63 thru column 64: Bad character `after` < `. Probable cause: Unescaped` < `. Try escaping it as` &lt;.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert

This comment has been minimized.

Copy link
Member

@cvrebert cvrebert commented Oct 17, 2015

According to #11865, the <a data-dismiss="modal" data-toggle="modal" approach isn't supported.

@happy2deepak

This comment has been minimized.

Copy link

@happy2deepak happy2deepak commented Oct 30, 2015

So, does anyone has a working solution to it? other than adding "modal-open" class using jquery?

@mdo

This comment has been minimized.

Copy link
Member

@mdo mdo commented Nov 2, 2015

We explicitly don't allow stacked modals, so should we close this as a won't fix?

@cvrebert

This comment has been minimized.

Copy link
Member

@cvrebert cvrebert commented Nov 2, 2015

Probably should at least document that it doesn't work, since it seems like it (c|sh)ould in the abstract.

@happy2deepak

This comment has been minimized.

Copy link

@happy2deepak happy2deepak commented Nov 2, 2015

@cvrebert yeah, at least that should be done.

@cvrebert cvrebert changed the title Again background scrolling for a modal opened within another modal <a data-dismiss="modal" data-toggle="modal"> doesn't work Dec 14, 2015
@cvrebert

This comment has been minimized.

Copy link
Member

@cvrebert cvrebert commented Dec 14, 2015

We explicitly don't allow stacked modals

Technically this isn't stacking modals. It's closing one modal and then immediately opening another. There's only one modal in play at a time.

@cvrebert cvrebert added the confirmed label Dec 14, 2015
@jack-fdrv

This comment has been minimized.

Copy link

@jack-fdrv jack-fdrv commented Dec 14, 2015

I fix it with not so small code... But it works.

$("[data-dismiss='modal'][data-toggle='modal']").click(function() {
    $('body').addClass('modal-open-fix');
    if($('body').css("padding-right") == '15px') {
        $('body').addClass('modal-open-fix-pad');
    }
    setTimeout(function() {
        if($('body').hasClass('modal-open-fix-pad')) {
            $('body').css('padding-right', '15px');
        }
        $('body').addClass('modal-open').removeClass('modal-open-fix, modal-open-fix-pad');
    }, 1000);
});

and for css

.modal-open-fix {
    overflow: hidden;
}
.modal-open-fix-pad {
    padding-right: 15px;
}

I know it could be better optimized.

@starr0stealer

This comment has been minimized.

Copy link

@starr0stealer starr0stealer commented Aug 9, 2016

https://github.com/starr0stealer/bootstrap/commit/4b7099889babef0ccf2cdf8c59ce0a6bcdbe08b3

I created a branch with the change-set above that handles this special use-case. I tried to make the changes to the JS as minimal as possible.

https://jsfiddle.net/oqxbuhct/ - In this Fiddle you can see the issue with BS 3.3.7
https://jsfiddle.net/ac45zk6z/ - In this Fiddle you can see the issue fixed by my changes

In short this is the approach I took to fix the issue, (modal-open is removed, and secondly padding-right needs to be managed when swapping modals).

  • The click.dismiss.bs.modal handler is updated to check if the 'closer' is also opening another modal, if so set a flag, and early reset page padding right.
  • The hideModal function is updated to check for the modalSwap flag, if false continue as normal, otherwise do not remove modal-open or reset padding and clear the flag.

I introduce the $.fn.modal.modalSwap flag because when the body has any padding right values, opening and closing modals results in the padding to continually grow, which is a result of not resetting the padding when opt-ing out of removing the modal-open class. You need to stop resetting the padding during this set all the call-stack executes the hiding handler after the new show handler is executed, if reset padding is left in it will remove the newly added rule resulting in content shifting.

Let me know what you think about this approach, such as if you thinks its a good idea or if you think I may introduced further bugs. As well as if you think it could be handled in a better way.

@twbs-lmvtfy

This comment has been minimized.

Copy link

@twbs-lmvtfy twbs-lmvtfy commented Aug 9, 2016

Hi @starr0stealer!

You appear to have posted a live example (https://fiddle.jshell.net/oqxbuhct/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 470, column 5: E013: Only columns (.col-*-*) may be children of .rows
  • line 484, column 1: E048: .modal must have a role="dialog" attribute.
  • line 500, column 1: E048: .modal must have a role="dialog" attribute.
  • line 485, column 3: E049: .modal-dialog must have a role="document" attribute.
  • line 501, column 3: E049: .modal-dialog must have a role="document" attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@twbs-lmvtfy

This comment has been minimized.

Copy link

@twbs-lmvtfy twbs-lmvtfy commented Aug 9, 2016

Hi @starr0stealer!

You appear to have posted a live example (https://fiddle.jshell.net/ac45zk6z/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 485, column 5: E013: Only columns (.col-*-*) may be children of .rows
  • line 499, column 1: E048: .modal must have a role="dialog" attribute.
  • line 515, column 1: E048: .modal must have a role="dialog" attribute.
  • line 500, column 3: E049: .modal-dialog must have a role="document" attribute.
  • line 516, column 3: E049: .modal-dialog must have a role="document" attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@mdo

This comment has been minimized.

Copy link
Member

@mdo mdo commented Sep 5, 2016

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

@mdo mdo closed this Sep 5, 2016
@StefanoBiancardo

This comment has been minimized.

Copy link

@StefanoBiancardo StefanoBiancardo commented Nov 11, 2016

I fix with this code (edit bootstrap.js)

Modal.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {

      if($(".modal-backdrop").length == 0) // Added this line
      {  // Added this line
        that.$body.removeClass('modal-open');  // Added this line
        that.removeBackdrop();  // Added this line
      }  // Added this line

      that.resetAdjustments()
      that.resetScrollbar()
      that.$element.trigger('hidden.bs.modal')
    })
  }

And this

Modal.prototype.hide = function (e) {
    if (e) e.preventDefault()

    e = $.Event('hide.bs.modal')

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    this.escape()
    this.resize()

    $(document).off('focusin.bs.modal')

    this.$element
      .removeClass('in')
      .off('click.dismiss.bs.modal')
      .off('mouseup.dismiss.bs.modal')

    this.$dialog.off('mousedown.dismiss.bs.modal')
    // Add condition $(".modal-backdrop").length == 0 to if
    $.support.transition && this.$element.hasClass('fade') && $(".modal-backdrop").length == 0 ?
      this.$element
        .one('bsTransitionEnd', $.proxy(this.hideModal, this))
        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
      this.hideModal()
  }

This work for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.