Site Notice
hello, world
MediaWiki:Js-CustomModal.js
From Project-EPB Commons
Invoke this: https://common.wjghj.cn/js/{{#replace:{{#replace:Js-CustomModal.js|Js-|}}|.js|}}
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/**
*『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);
}
}
