现在我的代码包含一个HTML表格和一个在加载页面时出现的弹出窗口。 HTML表的标题栏是固定的，但只有在单击弹出窗口上的✕按钮时它才会固定。如果您要按键g或G，可以重新访问该弹出窗口。但是，HTML表的标题栏将保持固定并在某种程度上模糊弹出窗口。
这就是我想要解决的问题。当按下g或G键时，我希望HTML表格的标题栏在首先点击✕按钮之前返回到原始状态。
执行此操作的一种方法是将属性scrollingTop的值从-10更改为-1000，如下所示：
单击✕按钮时激活：
$(".copyTable").floatThead({
scrollingTop: -10
});
按下g或G键时，我想要发生什么：
$(".copyTable").floatThead({
scrollingTop: -1000
});
现在这只是实现目标的一种方式，欢迎您使用其他/更简单的方法来做同样的事情。
显然，这并不像在我的按键功能中添加scrollingTop属性设置为-1000的代码那么简单，因为那时我不会在这里。我还尝试了其他几种方法来实现这一点，例如使用全局变量无济于事。
希望你们可以帮我解决我的问题，因为我根本无法弄清楚如何完成看似简单的任务。这是fiddle的链接，但我必须警告你，由于屏幕尺寸较小，定位有点偏差。它在片段中运行良好，但我建议以全屏模式查看它以获得更好的效果。
$(document).ready(function() {
$(document).keypress(function(e) {
if (e.charCode === 71 || e.charCode === 103) {
$('#PopUp').css("visibility", "visible");
$('#PopUp').css("opacity", 1);
}
});
$('#PopUp').css("visibility", "visible");
$('#PopUp').css("opacity", 1);
$(".close").click(function() {
$('#PopUp').css("visibility", "hidden");
$('#PopUp').css("opacity", 0);
! function (a) {
function b(a, b, c) {
if (8 == g) {
var d = j.width(),
e = f.debounce(function () {
var a = j.width();
d != a && (d = a, c())
}, a);
j.on(b, e)
} else j.on(b, f.debounce(c, a))
}
function c(a) {
window.console && window.console && window.console.log && window.console.log(a)
}
function d() {
var b = a('<div style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');
a("body").append(b);
var c = b.innerWidth(),
d = a("div", b).innerWidth();
return b.remove(), c - d
}
function e(a) {
if (a.dataTableSettings) for (var b = 0; b < a.dataTableSettings.length; b++) {
var c = a.dataTableSettings[b].nTable;
if (a[0] == c) return !0
}
return !1
}
a.floatThead = a.floatThead || {}, a.floatThead.defaults = {
cellTag: null,
headerCellSelector: "tr:first>th:visible",
zIndex: 1001,
debounceResizeMs: 10,
useAbsolutePositioning: !0,
scrollingTop: 0,
scrollingBottom: 0,
scrollContainer: function () {
return a([])
},
getSizingRow: function (a) {
return a.find("tbody tr:visible:first>*")
},
floatTableClass: "floatThead-table",
floatWrapperClass: "floatThead-wrapper",
floatContainerClass: "floatThead-container",
copyTableClass: !0,
debug: !1
};
var f = window._,
g = function () {
for (var a = 3, b = document.createElement("b"), c = b.all || []; a = 1 + a, b.innerHTML = "<\!--[if gt IE " + a + "]><i><![endif]-->", c[0];);
return a > 4 ? a : document.documentMode
}(),
h = null,
i = function () {
if (g) return !1;
var b = a("<table><colgroup><col></colgroup><tbody><tr><td style='width:10px'></td></tbody></table>");
a("body").append(b);
var c = b.find("col").width();
return b.remove(), 0 == c
}, j = a(window),
k = 0;
a.fn.floatThead = function (l) {
if (l = l || {}, !f && (f = window._ || a.floatThead._, !f)) throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore.");
if (8 > g) return this;
if (null == h && (h = i(), h && (document.createElement("fthtr"), document.createElement("fthtd"), document.createElement("fthfoot"))), f.isString(l)) {
var m = l,
n = this;
return this.filter("table").each(function () {
var b = a(this).data("floatThead-attached");
if (b && f.isFunction(b[m])) {
var c = b[m]();
"undefined" != typeof c && (n = c)
}
}), n
}
var o = a.extend({}, a.floatThead.defaults || {}, l);
return a.each(l, function (b) {
b in a.floatThead.defaults || !o.debug || c("jQuery.floatThead: used [" + b + "] key to init plugin, but that param is not an option for the plugin. Valid options are: " + f.keys(a.floatThead.defaults).join(", "))
}), this.filter(":not(." + o.floatTableClass + ")").each(function () {
function c(a) {
return a + ".fth-" + y + ".floatTHead"
}
function i() {
var b = 0;
A.find("tr:visible").each(function () {
b += a(this).outerHeight(!0)
}), Z.outerHeight(b), $.outerHeight(b)
}
function l() {
var a = z.outerWidth(),
b = I.width() || a;
if (X.width(b - F.vertical), O) {
var c = 100 * a / (b - F.vertical);
S.css("width", c + "%")
} else S.outerWidth(a)
}
function m() {
C = (f.isFunction(o.scrollingTop) ? o.scrollingTop(z) : o.scrollingTop) || 0, D = (f.isFunction(o.scrollingBottom) ? o.scrollingBottom(z) : o.scrollingBottom) || 0
}
function n() {
var b, c;
if (V) b = U.find("col").length;
else {
var d;
d = null == o.cellTag && o.headerCellSelector ? o.headerCellSelector : "tr:first>" + o.cellTag, c = A.find(d), b = 0, c.each(function () {
b += parseInt(a(this).attr("colspan") || 1, 10)
})
}
if (b != H) {
H = b;
for (var e = [], f = [], g = [], i = 0; b > i; i++) e.push('<th class="floatThead-col"/>'), f.push("<col/>"), g.push("<fthtd style='display:table-cell;height:0;width:auto;'/>");
f = f.join(""), e = e.join(""), h && (g = g.join(""), W.html(g), bb = W.find("fthtd")), Z.html(e), $ = Z.find("th"), V || U.html(f), _ = U.find("col"), T.html(f), ab = T.find("col")
}
return b
}
function p() {
if (!E) {
if (E = !0, J) {
var a = z.width(),
b = Q.width();
a > b && z.css("minWidth", a)
}
z.css(db), S.css(db), S.append(A), B.before(Y), i()
}
}
function q() {
E && (E = !1, J && z.width(fb), Y.detach(), z.prepend(A), z.css(eb), S.css(eb))
}
function r(a) {
J != a && (J = a, X.css({
position: J ? "absolute" : "fixed"
}))
}
function s(a, b, c, d) {
return h ? c : d ? o.getSizingRow(a, b, c) : b
}
function t() {
var a, b = n();
return function () {
var c = s(z, _, bb, g);
if (c.length == b && b > 0) {
if (!V) for (a = 0; b > a; a++) _.eq(a).css("width", "");
q();
var d = [];
for (a = 0; b > a; a++) d[a] = c.get(a).offsetWidth;
for (a = 0; b > a; a++) ab.eq(a).width(d[a]), _.eq(a).width(d[a]);
p()
} else S.append(A), z.css(eb), S.css(eb), i()
}
}
function u(a) {
var b = I.css("border-" + a + "-width"),
c = 0;
return b && ~b.indexOf("px") && (c = parseInt(b, 10)), c
}
function v() {
var a, b = I.scrollTop(),
c = 0,
d = L ? K.outerHeight(!0) : 0,
e = M ? d : -d,
f = X.height(),
g = z.offset(),
i = 0;
if (O) {
var k = I.offset();
c = g.top - k.top + b, L && M && (c += d), c -= u("top"), i = u("left")
} else a = g.top - C - f + D + F.horizontal;
var l = j.scrollTop(),
m = j.scrollLeft(),
n = I.scrollLeft();
return b = I.scrollTop(),
function (k) {
if ("windowScroll" == k ? (l = j.scrollTop(), m = j.scrollLeft()) : "containerScroll" == k ? (b = I.scrollTop(), n = I.scrollLeft()) : "init" != k && (l = j.scrollTop(), m = j.scrollLeft(), b = I.scrollTop(), n = I.scrollLeft()), !h || !(0 > l || 0 > m)) {
if (R) r("windowScrollDone" == k ? !0 : !1);
else if ("windowScrollDone" == k) return null;
g = z.offset(), L && M && (g.top += d);
var o, s, t = z.outerHeight();
if (O && J) {
if (c >= b) {
var u = c - b;
o = u > 0 ? u : 0
} else o = P ? 0 : b;
s = i
} else !O && J ? (l > a + t + e ? o = t - f + e : g.top > l + C ? (o = 0, q()) : (o = C + l - g.top + c + (M ? d : 0), p()), s = 0) : O && !J ? (c > b || b - c > t ? (o = g.top - l, q()) : (o = g.top + b - l - c, p()), s = g.left + n - m) : O || J || (l > a + t + e ? o = t + C - l + a + e : g.top > l + C ? (o = g.top - l, p()) : o = C, s = g.left - m);
return {
top: o,
left: s
}
}
}
}
function w() {
var a = null,
b = null,
c = null;
return function (d, e, f) {
null == d || a == d.top && b == d.left || (X.css({
top: d.top,
left: d.left
}), a = d.top, b = d.left), e && l(), f && i();
var g = I.scrollLeft();
J && c == g || (X.scrollLeft(g), c = g)
}
}
function x() {
if (I.length) {
var a = I.width(),
b = I.height(),
c = z.height(),
d = z.width(),
e = d > a ? G : 0,
f = c > b ? G : 0;
F.horizontal = d > a - f ? G : 0, F.vertical = c > b - e ? G : 0
}
}
var y = k,
z = a(this);
if (z.data("floatThead-attached")) return !0;
if (!z.is("table")) throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');
var A = z.find("thead:first"),
B = z.find("tbody:first");
if (0 == A.length) throw new Error("jQuery.floatThead must be run on a table that contains a <thead> element");
var C, D, E = !1,
F = {
vertical: 0,
horizontal: 0
}, G = d(),
H = 0,
I = o.scrollContainer(z) || a([]),
J = o.useAbsolutePositioning;
null == J && (J = o.scrollContainer(z).length);
var K = z.find("caption"),
L = 1 == K.length;
if (L) var M = "top" === (K.css("caption-side") || K.attr("align") || "top");
var N = a('<fthfoot style="display:table-footer-group;"/>'),
O = I.length > 0,
P = !1,
Q = a([]),
R = 9 >= g && !O && J,
S = a("<table/>"),
T = a("<colgroup/>"),
U = z.find("colgroup:first"),
V = !0;
0 == U.length && (U = a("<colgroup/>"), V = !1);
var W = a('<fthrow style="display:table-row;height:0;"/>'),
X = a('<div style="overflow: hidden;"></div>'),
Y = a("<thead/>"),
Z = a('<tr class="size-row"/>'),
$ = a([]),
_ = a([]),
ab = a([]),
bb = a([]);
if (Y.append(Z), z.prepend(U), h && (N.append(W), z.append(N)), S.append(T), X.append(S), o.copyTableClass && S.attr("class", z.attr("class")), S.attr({
cellpadding: z.attr("cellpadding"),
cellspacing: z.attr("cellspacing"),
border: z.attr("border")
}), S.css({
borderCollapse: z.css("borderCollapse"),
border: z.css("border")
}), S.addClass(o.floatTableClass).css("margin", 0), J) {
var cb = function (a, b) {
var c = a.css("position"),
d = "relative" == c || "absolute" == c;
if (!d || b) {
var e = {
paddingLeft: a.css("paddingLeft"),
paddingRight: a.css("paddingRight")
};
X.css(e), a = a.wrap("<div class='" + o.floatWrapperClass + "' style='position: relative; clear:both; padding-top: 0px;'></div>").parent(), P = !0
}
return a
};
O ? (Q = cb(I, !0), Q.append(X)) : (Q = cb(z), z.after(X))
} else z.after(X);
X.css({
position: J ? "absolute" : "fixed",
marginTop: 0,
top: J ? 0 : "auto",
zIndex: o.zIndex
}), X.addClass(o.floatContainerClass), m();
var db = {
"table-layout": "fixed"
}, eb = {
"table-layout": z.css("tableLayout") || "auto"
}, fb = z[0].style.width || "";
x();
var gb, hb = function () {
(gb = t())()
};
hb();
var ib = v(),
jb = w();
jb(ib("init"), !0);
var kb = f.debounce(function () {
jb(ib("windowScrollDone"), !1)
}, 300),
lb = function () {
jb(ib("windowScroll"), !1), kb()
}, mb = function () {
jb(ib("containerScroll"), !1)
}, nb = function () {
m(), x(), hb(), ib = v(), (jb = w())(ib("resize"), !0, !0)
}, ob = f.debounce(function () {
x(), m(), hb(), ib = v(), jb(ib("reflow"), !0)
}, 1);
O ? J ? I.on(c("scroll"), mb) : (I.on(c("scroll"), mb), j.on(c("scroll"), lb)) : j.on(c("scroll"), lb), j.on(c("load"), ob), b(o.debounceResizeMs, c("resize"), nb), z.on("reflow", ob), e(z) && z.on("filter", ob).on("sort", ob).on("page", ob), z.data("floatThead-attached", {
destroy: function () {
var a = ".fth-" + y;
q(), z.css(eb), U.remove(), h && N.remove(), Y.parent().length && Y.replaceWith(A), z.off("reflow"), I.off(a), P && (I.length ? I.unwrap() : z.unwrap()), J && z.css("minWidth", ""), X.remove(), z.data("floatThead-attached", !1), j.off(a)
},
reflow: function () {
ob()
},
setHeaderHeight: function () {
i()
},
getFloatContainer: function () {
return X
},
getRowGroups: function () {
return E ? X.find("thead").add(z.find("tbody,tfoot")) : z.find("thead,tbody,tfoot")
}
}), k++
}), this
}
}(jQuery),
function (a) {
a.floatThead = a.floatThead || {}, a.floatThead._ = window._ || function () {
var b = {}, c = Object.prototype.hasOwnProperty,
d = ["Arguments", "Function", "String", "Number", "Date", "RegExp"];
return b.has = function (a, b) {
return c.call(a, b)
}, b.keys = function (a) {
if (a !== Object(a)) throw new TypeError("Invalid object");
var c = [];
for (var d in a) b.has(a, d) && c.push(d);
return c
}, a.each(d, function () {
var a = this;
b["is" + a] = function (b) {
return Object.prototype.toString.call(b) == "[object " + a + "]"
}
}), b.debounce = function (a, b, c) {
var d, e, f, g, h;
return function () {
f = this, e = arguments, g = new Date;
var i = function () {
var j = new Date - g;
b > j ? d = setTimeout(i, b - j) : (d = null, c || (h = a.apply(f, e)))
}, j = c && !d;
return d || (d = setTimeout(i, b)), j && (h = a.apply(f, e)), h
}
}, b
}()
}(jQuery);
$(".copyTable").floatThead({
scrollingTop: -10
});
});
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 115%;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
height: 75px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.hidden_table{
/*display:none*/
}
button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-family: "Open Sans",sans-serif;
font-weight: 700;
color: #2D2D2D;
font-size: 1rem;
line-height: 1;
text-align: center;
}
.close-message {
font-family: "Open Sans",sans-serif;
font-weight: 700;
color: black;
font-size: 0.9rem;
line-height: 1;
position: absolute;
top: 15px;
left: 9px;
}
.t {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-ms-transform: scale(0.25);
z-index: 2;
position: absolute;
white-space: pre;
overflow: visible;
}
#t1_1{left:434.235px;top:35px;letter-spacing:0.1px;}
.s1_1{
FONT-SIZE: 85.4px;
FONT-FAMILY: Arial;
color: rgb(0,0,0);
FONT-WEIGHT: bold;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
height: 157%;
width: 115%;
z-index: 2;
}
.overlay:target {
visibility: hidden;
opacity: 0;
display:none;
}
.PopUp {
margin: 50px auto;
padding: 0px;
background: #fff;
border-radius: 5px;
width: 60%;
position: relative;
transition: all 5s ease-in-out;
z-index: 3;
}
.PopUp .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
z-index: 1;
}
.PopUp .close:hover {
color: orange;
}
.PopUp .content {
max-height: 115%;
overflow: auto;
}
@-moz-document url-prefix() {
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
height: 157%;
width: 115%;
}
}
div:not(#container) {
padding-top: 10px;
} <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="PopUp" class="overlay">
<div class="PopUp" >
<a class="close" id="close" href="#">✕</a>
<div class="content" id="content">
<div id="p1" class="p1" style="overflow: hidden; position: relative; width: 885px; height: 878px;">
<!-- Begin page background -->
<div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<div id="pg1" class="pg1" style="-webkit-user-select: none;"></div>
<!-- End page background -->
<!-- Begin text definitions (Positioned/styled in CSS) -->
<div id="t1_1" class="t s1_1">Popup</div>
<!-- End text definitions -->
<!--[if lt IE 9]><script type="text/javascript">
(function(divCount, pageNum) {
for (var i = 1; i < divCount; i++) {
var div = document.getElementById('t' + i.toString(36) + '_' + pageNum);
if (div !== null) {
div.style.top = (div.offsetTop * 4) + 'px';
div.style.left = (div.offsetLeft * 4) + 'px';
div.style.zoom = '25%';
}
}
})(49, 1);
</script><![endif]-->
</div>
</div>
</div>
</div>
<div class="container" id="container">
<table class="copyTable" id="copyTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1">
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr class="item" data-id="2">
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr class="item" data-id="3">
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr class="item" data-id="4">
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr class="item" data-id="5">
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr class="item" data-id="6">
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr class="item" data-id="7">
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr class="item" data-id="8">
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
</tbody>
</table>
</div>
<div class="hidden_table" id="hidden_table"></div>
答案 0 :(得分：2)
只需将这段代码添加到CSS中：
.floatThead-container{
z-index:1 !important;
}
使用z-index使标题栏位于#PopUp＆amp; .overlay。
你也可以试试这个：
$('.floatThead-container').css('top','0px');
有点复杂，因为当你按g或G时你必须调用它，但是每次弹出窗口打开和停止时你必须继续调用它在它关闭时调用它。
我附上了代码段，这里是fiddle。
$(document).ready(function() {
$(document).keypress(function(e) {
if (e.charCode === 71 || e.charCode === 103) {
$('#PopUp').css("visibility", "visible");
$('#PopUp').css("opacity", 1);
}
});
$('#PopUp').css("visibility", "visible");
$('#PopUp').css("opacity", 1);
$(".close").click(function() {
$('#PopUp').css("visibility", "hidden");
$('#PopUp').css("opacity", 0);
! function (a) {
function b(a, b, c) {
if (8 == g) {
var d = j.width(),
e = f.debounce(function () {
var a = j.width();
d != a && (d = a, c())
}, a);
j.on(b, e)
} else j.on(b, f.debounce(c, a))
}
function c(a) {
window.console && window.console && window.console.log && window.console.log(a)
}
function d() {
var b = a('<div style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');
a("body").append(b);
var c = b.innerWidth(),
d = a("div", b).innerWidth();
return b.remove(), c - d
}
function e(a) {
if (a.dataTableSettings) for (var b = 0; b < a.dataTableSettings.length; b++) {
var c = a.dataTableSettings[b].nTable;
if (a[0] == c) return !0
}
return !1
}
a.floatThead = a.floatThead || {}, a.floatThead.defaults = {
cellTag: null,
headerCellSelector: "tr:first>th:visible",
zIndex: 1001,
debounceResizeMs: 10,
useAbsolutePositioning: !0,
scrollingTop: 0,
scrollingBottom: 0,
scrollContainer: function () {
return a([])
},
getSizingRow: function (a) {
return a.find("tbody tr:visible:first>*")
},
floatTableClass: "floatThead-table",
floatWrapperClass: "floatThead-wrapper",
floatContainerClass: "floatThead-container",
copyTableClass: !0,
debug: !1
};
var f = window._,
g = function () {
for (var a = 3, b = document.createElement("b"), c = b.all || []; a = 1 + a, b.innerHTML = "<\!--[if gt IE " + a + "]><i><![endif]-->", c[0];);
return a > 4 ? a : document.documentMode
}(),
h = null,
i = function () {
if (g) return !1;
var b = a("<table><colgroup><col></colgroup><tbody><tr><td style='width:10px'></td></tbody></table>");
a("body").append(b);
var c = b.find("col").width();
return b.remove(), 0 == c
}, j = a(window),
k = 0;
a.fn.floatThead = function (l) {
if (l = l || {}, !f && (f = window._ || a.floatThead._, !f)) throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore.");
if (8 > g) return this;
if (null == h && (h = i(), h && (document.createElement("fthtr"), document.createElement("fthtd"), document.createElement("fthfoot"))), f.isString(l)) {
var m = l,
n = this;
return this.filter("table").each(function () {
var b = a(this).data("floatThead-attached");
if (b && f.isFunction(b[m])) {
var c = b[m]();
"undefined" != typeof c && (n = c)
}
}), n
}
var o = a.extend({}, a.floatThead.defaults || {}, l);
return a.each(l, function (b) {
b in a.floatThead.defaults || !o.debug || c("jQuery.floatThead: used [" + b + "] key to init plugin, but that param is not an option for the plugin. Valid options are: " + f.keys(a.floatThead.defaults).join(", "))
}), this.filter(":not(." + o.floatTableClass + ")").each(function () {
function c(a) {
return a + ".fth-" + y + ".floatTHead"
}
function i() {
var b = 0;
A.find("tr:visible").each(function () {
b += a(this).outerHeight(!0)
}), Z.outerHeight(b), $.outerHeight(b)
}
function l() {
var a = z.outerWidth(),
b = I.width() || a;
if (X.width(b - F.vertical), O) {
var c = 100 * a / (b - F.vertical);
S.css("width", c + "%")
} else S.outerWidth(a)
}
function m() {
C = (f.isFunction(o.scrollingTop) ? o.scrollingTop(z) : o.scrollingTop) || 0, D = (f.isFunction(o.scrollingBottom) ? o.scrollingBottom(z) : o.scrollingBottom) || 0
}
function n() {
var b, c;
if (V) b = U.find("col").length;
else {
var d;
d = null == o.cellTag && o.headerCellSelector ? o.headerCellSelector : "tr:first>" + o.cellTag, c = A.find(d), b = 0, c.each(function () {
b += parseInt(a(this).attr("colspan") || 1, 10)
})
}
if (b != H) {
H = b;
for (var e = [], f = [], g = [], i = 0; b > i; i++) e.push('<th class="floatThead-col"/>'), f.push("<col/>"), g.push("<fthtd style='display:table-cell;height:0;width:auto;'/>");
f = f.join(""), e = e.join(""), h && (g = g.join(""), W.html(g), bb = W.find("fthtd")), Z.html(e), $ = Z.find("th"), V || U.html(f), _ = U.find("col"), T.html(f), ab = T.find("col")
}
return b
}
function p() {
if (!E) {
if (E = !0, J) {
var a = z.width(),
b = Q.width();
a > b && z.css("minWidth", a)
}
z.css(db), S.css(db), S.append(A), B.before(Y), i()
}
}
function q() {
E && (E = !1, J && z.width(fb), Y.detach(), z.prepend(A), z.css(eb), S.css(eb))
}
function r(a) {
J != a && (J = a, X.css({
position: J ? "absolute" : "fixed"
}))
}
function s(a, b, c, d) {
return h ? c : d ? o.getSizingRow(a, b, c) : b
}
function t() {
var a, b = n();
return function () {
var c = s(z, _, bb, g);
if (c.length == b && b > 0) {
if (!V) for (a = 0; b > a; a++) _.eq(a).css("width", "");
q();
var d = [];
for (a = 0; b > a; a++) d[a] = c.get(a).offsetWidth;
for (a = 0; b > a; a++) ab.eq(a).width(d[a]), _.eq(a).width(d[a]);
p()
} else S.append(A), z.css(eb), S.css(eb), i()
}
}
function u(a) {
var b = I.css("border-" + a + "-width"),
c = 0;
return b && ~b.indexOf("px") && (c = parseInt(b, 10)), c
}
function v() {
var a, b = I.scrollTop(),
c = 0,
d = L ? K.outerHeight(!0) : 0,
e = M ? d : -d,
f = X.height(),
g = z.offset(),
i = 0;
if (O) {
var k = I.offset();
c = g.top - k.top + b, L && M && (c += d), c -= u("top"), i = u("left")
} else a = g.top - C - f + D + F.horizontal;
var l = j.scrollTop(),
m = j.scrollLeft(),
n = I.scrollLeft();
return b = I.scrollTop(),
function (k) {
if ("windowScroll" == k ? (l = j.scrollTop(), m = j.scrollLeft()) : "containerScroll" == k ? (b = I.scrollTop(), n = I.scrollLeft()) : "init" != k && (l = j.scrollTop(), m = j.scrollLeft(), b = I.scrollTop(), n = I.scrollLeft()), !h || !(0 > l || 0 > m)) {
if (R) r("windowScrollDone" == k ? !0 : !1);
else if ("windowScrollDone" == k) return null;
g = z.offset(), L && M && (g.top += d);
var o, s, t = z.outerHeight();
if (O && J) {
if (c >= b) {
var u = c - b;
o = u > 0 ? u : 0
} else o = P ? 0 : b;
s = i
} else !O && J ? (l > a + t + e ? o = t - f + e : g.top > l + C ? (o = 0, q()) : (o = C + l - g.top + c + (M ? d : 0), p()), s = 0) : O && !J ? (c > b || b - c > t ? (o = g.top - l, q()) : (o = g.top + b - l - c, p()), s = g.left + n - m) : O || J || (l > a + t + e ? o = t + C - l + a + e : g.top > l + C ? (o = g.top - l, p()) : o = C, s = g.left - m);
return {
top: o,
left: s
}
}
}
}
function w() {
var a = null,
b = null,
c = null;
return function (d, e, f) {
null == d || a == d.top && b == d.left || (X.css({
top: d.top,
left: d.left
}), a = d.top, b = d.left), e && l(), f && i();
var g = I.scrollLeft();
J && c == g || (X.scrollLeft(g), c = g)
}
}
function x() {
if (I.length) {
var a = I.width(),
b = I.height(),
c = z.height(),
d = z.width(),
e = d > a ? G : 0,
f = c > b ? G : 0;
F.horizontal = d > a - f ? G : 0, F.vertical = c > b - e ? G : 0
}
}
var y = k,
z = a(this);
if (z.data("floatThead-attached")) return !0;
if (!z.is("table")) throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');
var A = z.find("thead:first"),
B = z.find("tbody:first");
if (0 == A.length) throw new Error("jQuery.floatThead must be run on a table that contains a <thead> element");
var C, D, E = !1,
F = {
vertical: 0,
horizontal: 0
}, G = d(),
H = 0,
I = o.scrollContainer(z) || a([]),
J = o.useAbsolutePositioning;
null == J && (J = o.scrollContainer(z).length);
var K = z.find("caption"),
L = 1 == K.length;
if (L) var M = "top" === (K.css("caption-side") || K.attr("align") || "top");
var N = a('<fthfoot style="display:table-footer-group;"/>'),
O = I.length > 0,
P = !1,
Q = a([]),
R = 9 >= g && !O && J,
S = a("<table/>"),
T = a("<colgroup/>"),
U = z.find("colgroup:first"),
V = !0;
0 == U.length && (U = a("<colgroup/>"), V = !1);
var W = a('<fthrow style="display:table-row;height:0;"/>'),
X = a('<div style="overflow: hidden;"></div>'),
Y = a("<thead/>"),
Z = a('<tr class="size-row"/>'),
$ = a([]),
_ = a([]),
ab = a([]),
bb = a([]);
if (Y.append(Z), z.prepend(U), h && (N.append(W), z.append(N)), S.append(T), X.append(S), o.copyTableClass && S.attr("class", z.attr("class")), S.attr({
cellpadding: z.attr("cellpadding"),
cellspacing: z.attr("cellspacing"),
border: z.attr("border")
}), S.css({
borderCollapse: z.css("borderCollapse"),
border: z.css("border")
}), S.addClass(o.floatTableClass).css("margin", 0), J) {
var cb = function (a, b) {
var c = a.css("position"),
d = "relative" == c || "absolute" == c;
if (!d || b) {
var e = {
paddingLeft: a.css("paddingLeft"),
paddingRight: a.css("paddingRight")
};
X.css(e), a = a.wrap("<div class='" + o.floatWrapperClass + "' style='position: relative; clear:both; padding-top: 0px;'></div>").parent(), P = !0
}
return a
};
O ? (Q = cb(I, !0), Q.append(X)) : (Q = cb(z), z.after(X))
} else z.after(X);
X.css({
position: J ? "absolute" : "fixed",
marginTop: 0,
top: J ? 0 : "auto",
zIndex: o.zIndex
}), X.addClass(o.floatContainerClass), m();
var db = {
"table-layout": "fixed"
}, eb = {
"table-layout": z.css("tableLayout") || "auto"
}, fb = z[0].style.width || "";
x();
var gb, hb = function () {
(gb = t())()
};
hb();
var ib = v(),
jb = w();
jb(ib("init"), !0);
var kb = f.debounce(function () {
jb(ib("windowScrollDone"), !1)
}, 300),
lb = function () {
jb(ib("windowScroll"), !1), kb()
}, mb = function () {
jb(ib("containerScroll"), !1)
}, nb = function () {
m(), x(), hb(), ib = v(), (jb = w())(ib("resize"), !0, !0)
}, ob = f.debounce(function () {
x(), m(), hb(), ib = v(), jb(ib("reflow"), !0)
}, 1);
O ? J ? I.on(c("scroll"), mb) : (I.on(c("scroll"), mb), j.on(c("scroll"), lb)) : j.on(c("scroll"), lb), j.on(c("load"), ob), b(o.debounceResizeMs, c("resize"), nb), z.on("reflow", ob), e(z) && z.on("filter", ob).on("sort", ob).on("page", ob), z.data("floatThead-attached", {
destroy: function () {
var a = ".fth-" + y;
q(), z.css(eb), U.remove(), h && N.remove(), Y.parent().length && Y.replaceWith(A), z.off("reflow"), I.off(a), P && (I.length ? I.unwrap() : z.unwrap()), J && z.css("minWidth", ""), X.remove(), z.data("floatThead-attached", !1), j.off(a)
},
reflow: function () {
ob()
},
setHeaderHeight: function () {
i()
},
getFloatContainer: function () {
return X
},
getRowGroups: function () {
return E ? X.find("thead").add(z.find("tbody,tfoot")) : z.find("thead,tbody,tfoot")
}
}), k++
}), this
}
}(jQuery),
function (a) {
a.floatThead = a.floatThead || {}, a.floatThead._ = window._ || function () {
var b = {}, c = Object.prototype.hasOwnProperty,
d = ["Arguments", "Function", "String", "Number", "Date", "RegExp"];
return b.has = function (a, b) {
return c.call(a, b)
}, b.keys = function (a) {
if (a !== Object(a)) throw new TypeError("Invalid object");
var c = [];
for (var d in a) b.has(a, d) && c.push(d);
return c
}, a.each(d, function () {
var a = this;
b["is" + a] = function (b) {
return Object.prototype.toString.call(b) == "[object " + a + "]"
}
}), b.debounce = function (a, b, c) {
var d, e, f, g, h;
return function () {
f = this, e = arguments, g = new Date;
var i = function () {
var j = new Date - g;
b > j ? d = setTimeout(i, b - j) : (d = null, c || (h = a.apply(f, e)))
}, j = c && !d;
return d || (d = setTimeout(i, b)), j && (h = a.apply(f, e)), h
}
}, b
}()
}(jQuery);
$(".copyTable").floatThead({
scrollingTop: -10
});
});
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 115%;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
height: 75px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.hidden_table{
/*display:none*/
}
button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-family: "Open Sans",sans-serif;
font-weight: 700;
color: #2D2D2D;
font-size: 1rem;
line-height: 1;
text-align: center;
}
.close-message {
font-family: "Open Sans",sans-serif;
font-weight: 700;
color: black;
font-size: 0.9rem;
line-height: 1;
position: absolute;
top: 15px;
left: 9px;
}
.t {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-ms-transform: scale(0.25);
z-index: 2;
position: absolute;
white-space: pre;
overflow: visible;
}
#t1_1{left:434.235px;top:35px;letter-spacing:0.1px;}
.s1_1{
FONT-SIZE: 85.4px;
FONT-FAMILY: Arial;
color: rgb(0,0,0);
FONT-WEIGHT: bold;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
height: 157%;
width: 115%;
z-index: 2;
}
.overlay:target {
visibility: hidden;
opacity: 0;
display:none;
}
.PopUp {
margin: 50px auto;
padding: 0px;
background: #fff;
border-radius: 5px;
width: 60%;
position: relative;
transition: all 5s ease-in-out;
z-index: 3;
}
.PopUp .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
z-index: 1;
}
.PopUp .close:hover {
color: orange;
}
.PopUp .content {
max-height: 115%;
overflow: auto;
}
@-moz-document url-prefix() {
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
height: 157%;
width: 115%;
}
}
div:not(#container) {
padding-top: 10px;
}
.floatThead-container{
z-index:1 !important;
} <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="PopUp" class="overlay">
<div class="PopUp" >
<a class="close" id="close" href="#">✕</a>
<div class="content" id="content">
<div id="p1" class="p1" style="overflow: hidden; position: relative; width: 885px; height: 878px;">
<!-- Begin page background -->
<div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<div id="pg1" class="pg1" style="-webkit-user-select: none;"></div>
<!-- End page background -->
<!-- Begin text definitions (Positioned/styled in CSS) -->
<div id="t1_1" class="t s1_1">Popup</div>
<!-- End text definitions -->
<!--[if lt IE 9]><script type="text/javascript">
(function(divCount, pageNum) {
for (var i = 1; i < divCount; i++) {
var div = document.getElementById('t' + i.toString(36) + '_' + pageNum);
if (div !== null) {
div.style.top = (div.offsetTop * 4) + 'px';
div.style.left = (div.offsetLeft * 4) + 'px';
div.style.zoom = '25%';
}
}
})(49, 1);
</script><![endif]-->
</div>
</div>
</div>
</div>
<div class="container" id="container">
<table class="copyTable" id="copyTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1">
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr class="item" data-id="2">
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr class="item" data-id="3">
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr class="item" data-id="4">
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr class="item" data-id="5">
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr class="item" data-id="6">
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr class="item" data-id="7">
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr class="item" data-id="8">
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
</tbody>
</table>
</div>
<div class="hidden_table" id="hidden_table"></div>