MyBB Community Forums

Full Version: Modal gets stuck on bottom when clicked repeatedly
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
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! Smile
(2020-01-08, 10:01 PM)mTurtle_ Wrote: [ -> ]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".
(2020-01-09, 07:57 AM)NoRules Wrote: [ -> ]
(2020-01-08, 10:01 PM)mTurtle_ Wrote: [ -> ]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 Smile 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.
Quote: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]
(2020-01-09, 04:08 PM).m. Wrote: [ -> ]
Quote: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  Shy
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();
    });
},
(2020-01-10, 10:18 PM)Mipher Wrote: [ -> ]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. : )
Pages: 1 2