MediaWiki:Js-CustomModal.js

/**
 *『Wjghj Project Static』
 * This _JavaScript_ code is from https://common.wjghj.cn
 * CC BY-NC-SA
 **/
/** Custom Modal**/
function PopupWindow(content,title,settings) {
  PopupWindow(content,title,settings);
}
function closeModal(id){
  var target;
  if (id === undefined) {
    target = $('.customModal, .customModal-bg');
  } else {
    target = $('.customModal[data-modalid="'+id+'"], .customModal-bg[data-modalid="'+id+'"]');
  }
  target.fadeOut(400);
  setTimeout(function(){target.remove()},400);
}
function Modal(content,title,settings) {
  var closeBtn = '<div class="customModal-close"><img class="close-modal" data-action="closeModal" src="https://wjghj.cn/images/d/d0/Close-btn.png"/></div>',
      addClass = '',
      modalId = new Date().getTime();

  if (settings !== undefined) {
    if (settings.closeBtn == false) {
      closeBtn = '';
    }
    if (settings.addClass !== undefined) {
      addClass = settings.addClass;
    }
  }

  if (title != '' && title != undefined) {
    title = '<h2 class="customModal-title">' + title + '</h2>';
  } else {
    title = '';
  }
  if (content == undefined || content == '') {
    title = '<h2 class="customModal-title" class="error"> Error in Popup Window </h2>';
    content = 'No content!';
  }

  $('body').append(
  '<div class="customModal-bg '+addClass+'" data-modalid="'+ modalId + '" style="z-index:'+ modalId + '"></div>' +
  '<div class="customModal '+addClass+'" data-modalid="'+ modalId + '" style="z-index:'+ Number(modalId+1) + '">' +
  '<div class="dragArea" style="width: 100%; text-align: center; color:white; background: gray; height:18px; user-select: none;"><span class="m-icons">drag_handle</span></div>'+
  closeBtn+
  title +
  '<div class="customModal-content">' +
  content +
  '</div>'+
  '</div>'
);

  // 初始化
  $('.customModal[data-modalid="'+modalId+'"], .customModal-bg[data-modalid="'+modalId+'"]').fadeIn(300);
  $('.customModal[data-modalid="'+modalId+'"]').css({
    'position': 'absolute',
    'top': $(window).scrollTop()+120
  });
  $('.customModal').each(function(){
    $this = $(this);
    $this.find('[data-action="closeModal"]').attr('data-modalid',$this.attr('data-modalid'));
  });

  // Close Modal
  $('.customModal-bg, .customModal [data-action="closeModal"]').click(function(){closeModal($(this).attr('data-modalid'))});

  // Dragable
  function bindDragging(e) {
    var element = $(this);
    var baseX = e.clientX;
    var baseY = e.clientY;
    var baseOffsetX = element.parent().offset().left;
    var baseOffsetY = element.parent().offset().top;
    $(document).mousemove(function(e) {
      element.parent().css({
        'left': baseOffsetX + e.clientX - baseX,
        'top': baseOffsetY + e.clientY - baseY
      });
    });
    $(document).mouseup(function() {
      $(document).unbind('mousemove');
      $(document).unbind('mouseup');
      bindDragging(element);
    });
  };
  if (settings !== undefined) {

    if (settings.disableDrag === true) {
      $('.customModal .dragArea').remove();
    } else {
      $('.customModal .dragArea').mousedown(bindDragging);
    }
    if (settings.disableBg !== undefined && settings.disableBg === true) {
      $('.customModal-bg[data-modalid="'+modalId+'"]').unbind();
    }
    if (settings.removeBg !== undefined && settings.removeBg === true) {
      $('.customModal-bg[data-modalid="'+modalId+'"]').remove();
    }

  } else {
    $('.customModal .dragArea').mousedown(bindDragging);
  }

}