Modal gets stuck on bottom when clicked repeatedly

[papa2fois]

Solved there : https://community.mybb.com/thread-225982.html

[User 129272]

I've tried all of the 3 solutions mentioned above first individually, then all at once, and none of those attempts seemed to have any effect. I can see that the change is there and visible to my browser, though.
Attempted on MyBB 1.8.22, default theme, stock install, PHP 7.3. Tried on Firefox and Chrome, both the latest available version - couldn't spot any significant difference between the experiences on either of them, and while Firefox didn't seem to appreciate the fade animation and started lagging a bit - that's probably just my computer. Currently hosting on my local machine for testing purposes, but if needed, I can set up hosting for it.

Sure is an odd issue, this. Thanks everyone for your help so far!

[User 4384]

Currently hosting on my local machine for testing purposes, but if needed, I can set up hosting for it.

Hi,

it would be great to see it "live".

[User 129272]

Currently hosting on my local machine for testing purposes, but if needed, I can set up hosting for it.

Hi,

it would be great to see it "live".

No problem  You can check here now: https://files.srv1.dev.avantheim.net/mybbtest/index.php
The issue seems to still remain.

---

I've been doing a bunch of research on this, and it seems like the issue is not with general.js. Rather, it's the modal jquery plugin allowing the user to create more modals while one is still initializing, etc.
That's all speculation though, just figured I'd provide all the info I have.

[.m.]

Modal gets stuck on bottom when clicked repeatedly

yes! if the clicks are fast enough then the modal appears at the bottom of the page ..

perhaps multiple clicks should be prevented
[jquery+prevent+multiple+click+events]

[User 129272]

Modal gets stuck on bottom when clicked repeatedly

yes! if the clicks are fast enough then the modal appears at the bottom of the page ..

perhaps multiple clicks should be prevented
[jquery+prevent+multiple+click+events]

I've come up with a similar solution to that already : ) So.. was it a misunderstanding all along? If it was, I'm sorry for all the trouble 

[Mipher]

The problem is here: https://github.com/mybb/mybb/blob/mybb_1...ns.js#L340

The jQuery modal plugin have an option to delay the show of the box and it does it using setTimeout. But soon after you can see that it adds the event handlers to manage the closure of the modal, this means: I can close the modal before the box is showed.

Fast solution, remove in jscripts/jquery.plugins.js (jscripts/jquery.plugins.min.js needs to be updated too) from the open method:

$(document).off('keydown.modal').on('keydown.modal', function(event) {
  var current = getCurrent();
  if (event.which == 27 && current.options.escapeClose) current.close();
});
if (this.options.clickClose)
  this.$blocker.on('click',function(e) {
    if (e.target==this)
      $.modal.close();
  });

and move it at the end of the show method

show: function() {
  this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
  if (this.options.showClose) {
    this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
    this.$elm.append(this.closeButton);
  }
  this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker);
  if(this.options.doFade) {
    this.$elm.css('opacity',0).show().animate({opacity: 1}, this.options.fadeDuration);
  } else {
    this.$elm.show();
  }
  this.$elm.trigger($.modal.OPEN, [this._ctx()]);
  $(document).off('keydown.modal').on('keydown.modal', function(event) {
    var current = getCurrent();
    if (event.which == 27 && current.options.escapeClose) current.close();
  });
  if (this.options.clickClose)
    this.$blocker.on('click',function(e) {
      if (e.target==this)
        $.modal.close();
    });
},

[User 129272]

The problem is here: https://github.com/mybb/mybb/blob/mybb_1...ns.js#L340

The jQuery modal plugin have an option to delay the show of the box and it does it using setTimeout. But soon after you can see that it adds the event handlers to manage the closure of the modal, this means: I can close the modal before the box is showed.

Fast solution, remove in jscripts/jquery.plugins.js (jscripts/jquery.plugins.min.js needs to be updated too) from the open method:

$(document).off('keydown.modal').on('keydown.modal', function(event) {
  var current = getCurrent();
  if (event.which == 27 && current.options.escapeClose) current.close();
});
if (this.options.clickClose)
  this.$blocker.on('click',function(e) {
    if (e.target==this)
      $.modal.close();
  });

and move it at the end of the show method

show: function() {
  this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
  if (this.options.showClose) {
    this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
    this.$elm.append(this.closeButton);
  }
  this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker);
  if(this.options.doFade) {
    this.$elm.css('opacity',0).show().animate({opacity: 1}, this.options.fadeDuration);
  } else {
    this.$elm.show();
  }
  this.$elm.trigger($.modal.OPEN, [this._ctx()]);
  $(document).off('keydown.modal').on('keydown.modal', function(event) {
    var current = getCurrent();
    if (event.which == 27 && current.options.escapeClose) current.close();
  });
  if (this.options.clickClose)
    this.$blocker.on('click',function(e) {
      if (e.target==this)
        $.modal.close();
    });
},

Worked like a charm! Thank you very much. : )