https://biblewebapp.com/study-v2/js/docs/docs.modal.js

1docs.createModalIndex = 0;
2docs.createModal = function(id, startTitle) {
3	var popup = $(
4			'<div class="popup-window" id="' + id + '">' +
5				'<div class="popup-header">' +
6					'<span class="popup-title">' + startTitle + '</span>' + 
7					'<span class="popup-close"></span>' + 
8				'</div>' +
9				'<div class="popup-menu"></div>' +
10				'<div class="popup-content"></div>' +
11				'<div class="popup-footer"></div>' +
12			'</div>')
13				.appendTo(document.body)
14				.hide(),
15		header = popup.find('.popup-header'),
16		title = popup.find('.popup-title'),
17		menu = popup.find('.popup-menu'),
18		close = popup.find('.popup-close').on('click', function() { popup.hide(); }),
19		content = popup.find('.popup-content'),
20		footer = popup.find('.popup-footer'),
21		isMouseDown = false,
22		startWindowPosition = null,
23		startMousePosiont = null;
24		
25	$(document).on('mousemove', function(e) {
26		if (isMouseDown) {
27			
28			popup.css({
29				top: startWindowPosition.top - (startMousePosition.y - e.clientY),
30				left: startWindowPosition.left - (startMousePosition.x - e.clientX)	  
31			});
32		}
33		
34	}).on('mouseup', function() {
35		isMouseDown = false;
36	});
37	
38	
39	header.on('mousedown', function(e) {
40		isMouseDown = true;
41		startWindowPosition = popup.offset();
42		startMousePosition = {x:e.clientX, y:e.clientY};
43	});
44	
45	return {
46		window: popup,
47		height: -1,
48		width: -1,
49		title: title,
50		menu: menu,
51		content: content,
52		footer: footer,
53		close: close,
54		hide: function() {
55			popup.hide();
56			return this;
57		},
58		show: function() {
59			// hide all others
60			$('.popup-window').hide();
61			
62			// show this one
63			popup.show().css({'z-index': docs.createModalIndex++});
64			
65			if (this.height > 0 && this.width > 0) {
66				this.size(this.width, this.height);
67			}
68
69			return this;
70		},
71		size: function(width, height) {
72			popup
73				.width(width)
74				.height(height);
75				
76			var visible = popup.is(':visible');
77				
78			popup.show();
79			
80			var newWidth = Math.abs(width - (content.outerWidth(true) - content.width()) );
81			content.width(newWidth);
82			
83			content.height(height 
84							- menu.outerHeight(true) 
85							- title.outerHeight(true) 
86							- footer.outerHeight(true) 
87							- (content.outerHeight(true) - content.height()) 
88							- 5);
89			
90			if (!visible)
91				popup.hide();
92			
93			this.height = height;
94			this.width = width;
95				
96			return this;
97		},
98		center: function() {
99			
100			var pos = popup.offset(),
101				width = popup.outerWidth(true),
102				height = popup.outerHeight(true),
103				wHeight = $(window).height(),
104				wWidth = $(window).width(),
105				top = (wHeight - height)/2;
106				left = (wWidth - width)/2;
107			
108			popup.css({top: top, left: left})
109			
110			return this;
111		}
112	}
113}