MediaWiki:Gadget-Modal.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
$(document).ready(function() {
  var counter = 0;

  $('.modal-template').each(function() {
    counter++;
    var modalId = 'wikiModal' + counter;
    var buttonId = 'wikiModalBtn' + counter;

    var $modal = $(this).find('.modal');
    var $button = $(this).find('.modal-button');
    var $span = $(this).find('.close');

    $button.attr('id', buttonId);
    $modal.attr('id', modalId);
    $span.attr('data-modal', modalId);

    $modal.appendTo('body');

    $button.on('click', function() {
      $modal.show();
    });

    $span.on('click', function() {
      $modal.hide();
    });

    $(window).on('click', function(event) {
      if ($(event.target).hasClass('modal')) {
        $('.modal').hide();
      }
    });
  });

  // Move all modals above the #bodyContent
  $('.modal').each(function() {
    $(this).insertBefore('#bodyContent');
  });
});