I am using colorbox jquery for auto pop-up. It works fine but It shows the text (pop up text) even after closing the window. Please let me know the solution. The code as below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title goes here</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>$(document).ready(function(){$.colorbox({inline:true, href:".ajax"});});</script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
});
</script>
</head>
<body>
<div class='ajax'>Pop-up text goes here</div>
</body>
</html>
I have added an onCleanup function to your colorbox that will set the display value of any div with the ajax class to none so that it is hidden after you close the colorbox.
Ignore the code for colorbox, I needed to include it in the actual answer to have it run in the snippet.
$(document).ready(function() {
$.colorbox({
inline: true,
href: ".ajax",
onCleanup: function() {
$(".ajax").css("display", "none");
},
});
});
/*!
Colorbox 1.6.4
license: MIT
http://www.jacklmoore.com/colorbox
*/
(function(t, e, i) {
function n(i, n, o) {
var r = e.createElement(i);
return n && (r.id = Z + n), o && (r.style.cssText = o), t(r)
}
function o() {
return i.innerHeight ? i.innerHeight : t(i).height()
}
function r(e, i) {
i !== Object(i) && (i = {}), this.cache = {}, this.el = e, this.value = function(e) {
var n;
return void 0 === this.cache[e] && (n = t(this.el).attr("data-cbox-" + e), void 0 !== n ? this.cache[e] = n : void 0 !== i[e] ? this.cache[e] = i[e] : void 0 !== X[e] && (this.cache[e] = X[e])), this.cache[e]
}, this.get = function(e) {
var i = this.value(e);
return t.isFunction(i) ? i.call(this.el, this) : i
}
}
function h(t) {
var e = W.length,
i = (A + t) % e;
return 0 > i ? e + i : i
}
function a(t, e) {
return Math.round((/%/.test(t) ? ("x" === e ? E.width() : o()) / 100 : 1) * parseInt(t, 10))
}
function s(t, e) {
return t.get("photo") || t.get("photoRegex").test(e)
}
function l(t, e) {
return t.get("retinaUrl") && i.devicePixelRatio > 1 ? e.replace(t.get("photoRegex"), t.get("retinaSuffix")) : e
}
function d(t) {
"contains" in x[0] && !x[0].contains(t.target) && t.target !== v[0] && (t.stopPropagation(), x.focus())
}
function c(t) {
c.str !== t && (x.add(v).removeClass(c.str).addClass(t), c.str = t)
}
function g(e) {
A = 0, e && e !== !1 && "nofollow" !== e ? (W = t("." + te).filter(function() {
var i = t.data(this, Y),
n = new r(this, i);
return n.get("rel") === e
}), A = W.index(_.el), -1 === A && (W = W.add(_.el), A = W.length - 1)) : W = t(_.el)
}
function u(i) {
t(e).trigger(i), ae.triggerHandler(i)
}
function f(i) {
var o;
if (!G) {
if (o = t(i).data(Y), _ = new r(i, o), g(_.get("rel")), !U) {
U = $ = !0, c(_.get("className")), x.css({
visibility: "hidden",
display: "block",
opacity: ""
}), I = n(se, "LoadedContent", "width:0; height:0; overflow:hidden; visibility:hidden"), b.css({
width: "",
height: ""
}).append(I), j = T.height() + k.height() + b.outerHeight(!0) - b.height(), D = C.width() + H.width() + b.outerWidth(!0) - b.width(), N = I.outerHeight(!0), z = I.outerWidth(!0);
var h = a(_.get("initialWidth"), "x"),
s = a(_.get("initialHeight"), "y"),
l = _.get("maxWidth"),
f = _.get("maxHeight");
_.w = Math.max((l !== !1 ? Math.min(h, a(l, "x")) : h) - z - D, 0), _.h = Math.max((f !== !1 ? Math.min(s, a(f, "y")) : s) - N - j, 0), I.css({
width: "",
height: _.h
}), J.position(), u(ee), _.get("onOpen"), O.add(F).hide(), x.focus(), _.get("trapFocus") && e.addEventListener && (e.addEventListener("focus", d, !0), ae.one(re, function() {
e.removeEventListener("focus", d, !0)
})), _.get("returnFocus") && ae.one(re, function() {
t(_.el).focus()
})
}
var p = parseFloat(_.get("opacity"));
v.css({
opacity: p === p ? p : "",
cursor: _.get("overlayClose") ? "pointer" : "",
visibility: "visible"
}).show(), _.get("closeButton") ? B.html(_.get("close")).appendTo(b) : B.appendTo("<div/>"), w()
}
}
function p() {
x || (V = !1, E = t(i), x = n(se).attr({
id: Y,
"class": t.support.opacity === !1 ? Z + "IE" : "",
role: "dialog",
tabindex: "-1"
}).hide(), v = n(se, "Overlay").hide(), L = t([n(se, "LoadingOverlay")[0], n(se, "LoadingGraphic")[0]]), y = n(se, "Wrapper"), b = n(se, "Content").append(F = n(se, "Title"), R = n(se, "Current"), P = t('<button type="button"/>').attr({
id: Z + "Previous"
}), K = t('<button type="button"/>').attr({
id: Z + "Next"
}), S = t('<button type="button"/>').attr({
id: Z + "Slideshow"
}), L), B = t('<button type="button"/>').attr({
id: Z + "Close"
}), y.append(n(se).append(n(se, "TopLeft"), T = n(se, "TopCenter"), n(se, "TopRight")), n(se, !1, "clear:left").append(C = n(se, "MiddleLeft"), b, H = n(se, "MiddleRight")), n(se, !1, "clear:left").append(n(se, "BottomLeft"), k = n(se, "BottomCenter"), n(se, "BottomRight"))).find("div div").css({
"float": "left"
}), M = n(se, !1, "position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;"), O = K.add(P).add(R).add(S)), e.body && !x.parent().length && t(e.body).append(v, x.append(y, M))
}
function m() {
function i(t) {
t.which > 1 || t.shiftKey || t.altKey || t.metaKey || t.ctrlKey || (t.preventDefault(), f(this))
}
return x ? (V || (V = !0, K.click(function() {
J.next()
}), P.click(function() {
J.prev()
}), B.click(function() {
J.close()
}), v.click(function() {
_.get("overlayClose") && J.close()
}), t(e).bind("keydown." + Z, function(t) {
var e = t.keyCode;
U && _.get("escKey") && 27 === e && (t.preventDefault(), J.close()), U && _.get("arrowKey") && W[1] && !t.altKey && (37 === e ? (t.preventDefault(), P.click()) : 39 === e && (t.preventDefault(), K.click()))
}), t.isFunction(t.fn.on) ? t(e).on("click." + Z, "." + te, i) : t("." + te).live("click." + Z, i)), !0) : !1
}
function w() {
var e, o, r, h = J.prep,
d = ++le;
if ($ = !0, q = !1, u(he), u(ie), _.get("onLoad"), _.h = _.get("height") ? a(_.get("height"), "y") - N - j : _.get("innerHeight") && a(_.get("innerHeight"), "y"), _.w = _.get("width") ? a(_.get("width"), "x") - z - D : _.get("innerWidth") && a(_.get("innerWidth"), "x"), _.mw = _.w, _.mh = _.h, _.get("maxWidth") && (_.mw = a(_.get("maxWidth"), "x") - z - D, _.mw = _.w && _.w < _.mw ? _.w : _.mw), _.get("maxHeight") && (_.mh = a(_.get("maxHeight"), "y") - N - j, _.mh = _.h && _.h < _.mh ? _.h : _.mh), e = _.get("href"), Q = setTimeout(function() {
L.show()
}, 100), _.get("inline")) {
var c = t(e).eq(0);
r = t("<div>").hide().insertBefore(c), ae.one(he, function() {
r.replaceWith(c)
}), h(c)
} else _.get("iframe") ? h(" ") : _.get("html") ? h(_.get("html")) : s(_, e) ? (e = l(_, e), q = _.get("createImg"), t(q).addClass(Z + "Photo").bind("error." + Z, function() {
h(n(se, "Error").html(_.get("imgError")))
}).one("load", function() {
d === le && setTimeout(function() {
var e;
_.get("retinaImage") && i.devicePixelRatio > 1 && (q.height = q.height / i.devicePixelRatio, q.width = q.width / i.devicePixelRatio), _.get("scalePhotos") && (o = function() {
q.height -= q.height * e, q.width -= q.width * e
}, _.mw && q.width > _.mw && (e = (q.width - _.mw) / q.width, o()), _.mh && q.height > _.mh && (e = (q.height - _.mh) / q.height, o())), _.h && (q.style.marginTop = Math.max(_.mh - q.height, 0) / 2 + "px"), W[1] && (_.get("loop") || W[A + 1]) && (q.style.cursor = "pointer", t(q).bind("click." + Z, function() {
J.next()
})), q.style.width = q.width + "px", q.style.height = q.height + "px", h(q)
}, 1)
}), q.src = e) : e && M.load(e, _.get("data"), function(e, i) {
d === le && h("error" === i ? n(se, "Error").html(_.get("xhrError")) : t(this).contents())
})
}
var v, x, y, b, T, C, H, k, W, E, I, M, L, F, R, S, K, P, B, O, _, j, D, N, z, A, q, U, $, G, Q, J, V, X = {
html: !1,
photo: !1,
iframe: !1,
inline: !1,
transition: "elastic",
speed: 300,
fadeOut: 300,
width: !1,
initialWidth: "600",
innerWidth: !1,
maxWidth: !1,
height: !1,
initialHeight: "450",
innerHeight: !1,
maxHeight: !1,
scalePhotos: !0,
scrolling: !0,
opacity: .9,
preloading: !0,
className: !1,
overlayClose: !0,
escKey: !0,
arrowKey: !0,
top: !1,
bottom: !1,
left: !1,
right: !1,
fixed: !1,
data: void 0,
closeButton: !0,
fastIframe: !0,
open: !1,
reposition: !0,
loop: !0,
slideshow: !1,
slideshowAuto: !0,
slideshowSpeed: 2500,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i,
retinaImage: !1,
retinaUrl: !1,
retinaSuffix: "@2x.$1",
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
xhrError: "This content failed to load.",
imgError: "This image failed to load.",
returnFocus: !0,
trapFocus: !0,
onOpen: !1,
onLoad: !1,
onComplete: !1,
onCleanup: !1,
onClosed: !1,
rel: function() {
return this.rel
},
href: function() {
return t(this).attr("href")
},
title: function() {
return this.title
},
createImg: function() {
var e = new Image,
i = t(this).data("cbox-img-attrs");
return "object" == typeof i && t.each(i, function(t, i) {
e[t] = i
}), e
},
createIframe: function() {
var i = e.createElement("iframe"),
n = t(this).data("cbox-iframe-attrs");
return "object" == typeof n && t.each(n, function(t, e) {
i[t] = e
}), "frameBorder" in i && (i.frameBorder = 0), "allowTransparency" in i && (i.allowTransparency = "true"), i.name = (new Date).getTime(), i.allowFullscreen = !0, i
}
},
Y = "colorbox",
Z = "cbox",
te = Z + "Element",
ee = Z + "_open",
ie = Z + "_load",
ne = Z + "_complete",
oe = Z + "_cleanup",
re = Z + "_closed",
he = Z + "_purge",
ae = t("<a/>"),
se = "div",
le = 0,
de = {},
ce = function() {
function t() {
clearTimeout(h)
}
function e() {
(_.get("loop") || W[A + 1]) && (t(), h = setTimeout(J.next, _.get("slideshowSpeed")))
}
function i() {
S.html(_.get("slideshowStop")).unbind(s).one(s, n), ae.bind(ne, e).bind(ie, t), x.removeClass(a + "off").addClass(a + "on")
}
function n() {
t(), ae.unbind(ne, e).unbind(ie, t), S.html(_.get("slideshowStart")).unbind(s).one(s, function() {
J.next(), i()
}), x.removeClass(a + "on").addClass(a + "off")
}
function o() {
r = !1, S.hide(), t(), ae.unbind(ne, e).unbind(ie, t), x.removeClass(a + "off " + a + "on")
}
var r, h, a = Z + "Slideshow_",
s = "click." + Z;
return function() {
r ? _.get("slideshow") || (ae.unbind(oe, o), o()) : _.get("slideshow") && W[1] && (r = !0, ae.one(oe, o), _.get("slideshowAuto") ? i() : n(), S.show())
}
}();
t[Y] || (t(p), J = t.fn[Y] = t[Y] = function(e, i) {
var n, o = this;
return e = e || {}, t.isFunction(o) && (o = t("<a/>"), e.open = !0), o[0] ? (p(), m() && (i && (e.onComplete = i), o.each(function() {
var i = t.data(this, Y) || {};
t.data(this, Y, t.extend(i, e))
}).addClass(te), n = new r(o[0], e), n.get("open") && f(o[0])), o) : o
}, J.position = function(e, i) {
function n() {
T[0].style.width = k[0].style.width = b[0].style.width = parseInt(x[0].style.width, 10) - D + "px", b[0].style.height = C[0].style.height = H[0].style.height = parseInt(x[0].style.height, 10) - j + "px"
}
var r, h, s, l = 0,
d = 0,
c = x.offset();
if (E.unbind("resize." + Z), x.css({
top: -9e4,
left: -9e4
}), h = E.scrollTop(), s = E.scrollLeft(), _.get("fixed") ? (c.top -= h, c.left -= s, x.css({
position: "fixed"
})) : (l = h, d = s, x.css({
position: "absolute"
})), d += _.get("right") !== !1 ? Math.max(E.width() - _.w - z - D - a(_.get("right"), "x"), 0) : _.get("left") !== !1 ? a(_.get("left"), "x") : Math.round(Math.max(E.width() - _.w - z - D, 0) / 2), l += _.get("bottom") !== !1 ? Math.max(o() - _.h - N - j - a(_.get("bottom"), "y"), 0) : _.get("top") !== !1 ? a(_.get("top"), "y") : Math.round(Math.max(o() - _.h - N - j, 0) / 2), x.css({
top: c.top,
left: c.left,
visibility: "visible"
}), y[0].style.width = y[0].style.height = "9999px", r = {
width: _.w + z + D,
height: _.h + N + j,
top: l,
left: d
}, e) {
var g = 0;
t.each(r, function(t) {
return r[t] !== de[t] ? (g = e, void 0) : void 0
}), e = g
}
de = r, e || x.css(r), x.dequeue().animate(r, {
duration: e || 0,
complete: function() {
n(), $ = !1, y[0].style.width = _.w + z + D + "px", y[0].style.height = _.h + N + j + "px", _.get("reposition") && setTimeout(function() {
E.bind("resize." + Z, J.position)
}, 1), t.isFunction(i) && i()
},
step: n
})
}, J.resize = function(t) {
var e;
U && (t = t || {}, t.width && (_.w = a(t.width, "x") - z - D), t.innerWidth && (_.w = a(t.innerWidth, "x")), I.css({
width: _.w
}), t.height && (_.h = a(t.height, "y") - N - j), t.innerHeight && (_.h = a(t.innerHeight, "y")), t.innerHeight || t.height || (e = I.scrollTop(), I.css({
height: "auto"
}), _.h = I.height()), I.css({
height: _.h
}), e && I.scrollTop(e), J.position("none" === _.get("transition") ? 0 : _.get("speed")))
}, J.prep = function(i) {
function o() {
return _.w = _.w || I.width(), _.w = _.mw && _.mw < _.w ? _.mw : _.w, _.w
}
function a() {
return _.h = _.h || I.height(), _.h = _.mh && _.mh < _.h ? _.mh : _.h, _.h
}
if (U) {
var d, g = "none" === _.get("transition") ? 0 : _.get("speed");
I.remove(), I = n(se, "LoadedContent").append(i), I.hide().appendTo(M.show()).css({
width: o(),
overflow: _.get("scrolling") ? "auto" : "hidden"
}).css({
height: a()
}).prependTo(b), M.hide(), t(q).css({
"float": "none"
}), c(_.get("className")), d = function() {
function i() {
t.support.opacity === !1 && x[0].style.removeAttribute("filter")
}
var n, o, a = W.length;
U && (o = function() {
clearTimeout(Q), L.hide(), u(ne), _.get("onComplete")
}, F.html(_.get("title")).show(), I.show(), a > 1 ? ("string" == typeof _.get("current") && R.html(_.get("current").replace("{current}", A + 1).replace("{total}", a)).show(), K[_.get("loop") || a - 1 > A ? "show" : "hide"]().html(_.get("next")), P[_.get("loop") || A ? "show" : "hide"]().html(_.get("previous")), ce(), _.get("preloading") && t.each([h(-1), h(1)], function() {
var i, n = W[this],
o = new r(n, t.data(n, Y)),
h = o.get("href");
h && s(o, h) && (h = l(o, h), i = e.createElement("img"), i.src = h)
})) : O.hide(), _.get("iframe") ? (n = _.get("createIframe"), _.get("scrolling") || (n.scrolling = "no"), t(n).attr({
src: _.get("href"),
"class": Z + "Iframe"
}).one("load", o).appendTo(I), ae.one(he, function() {
n.src = "//about:blank"
}), _.get("fastIframe") && t(n).trigger("load")) : o(), "fade" === _.get("transition") ? x.fadeTo(g, 1, i) : i())
}, "fade" === _.get("transition") ? x.fadeTo(g, 0, function() {
J.position(0, d)
}) : J.position(g, d)
}
}, J.next = function() {
!$ && W[1] && (_.get("loop") || W[A + 1]) && (A = h(1), f(W[A]))
}, J.prev = function() {
!$ && W[1] && (_.get("loop") || A) && (A = h(-1), f(W[A]))
}, J.close = function() {
U && !G && (G = !0, U = !1, u(oe), _.get("onCleanup"), E.unbind("." + Z), v.fadeTo(_.get("fadeOut") || 0, 0), x.stop().fadeTo(_.get("fadeOut") || 0, 0, function() {
x.hide(), v.hide(), u(he), I.remove(), setTimeout(function() {
G = !1, u(re), _.get("onClosed")
}, 1)
}))
}, J.remove = function() {
x && (x.stop(), t[Y].close(), x.stop(!1, !0).remove(), v.remove(), G = !1, x = null, t("." + te).removeData(Y).removeClass(te), t(e).unbind("click." + Z).unbind("keydown." + Z))
}, J.element = function() {
return t(_.el)
}, J.settings = X)
})(jQuery, document, window);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='ajax'>Pop-up text goes here</div>
</body>