Solved my own problem on this one! I decided to take a look at how lightbox does it and realized it's pretty simple. Just append the body like so:
$('body').append('<div class="overlay"></div>');
hi will you please guide me how to add in javascript . i had also same problem.
below is my code.
<script type="text/javascript">
function displayimagepopup(ImageURL, FileID, ContentTitle, ContentDescription, DownloadURL) {
document.getElementById('<%# hdnFileID.ClientID %>').value = FileID;
document.getElementById('<%# hdnURL.ClientID %>').value = DownloadURL;
document.getElementById("imageDisplay").src = "";
document.getElementById("imageDisplay").src = ImageURL;
document.getElementById("pBriefInfo").innerHTML = "<strong>" + ContentTitle + "</strong><br/>";
document.getElementById("pimageDisplay").style.display = "inline";
document.getElementById("pvideoDisplay").style.display = "none";
if (DownloadURL == null || DownloadURL == "") {
document.getElementById('<%# btnDownload.ClientID %>').style.display = "none";
}
else {
document.getElementById('<%# btnDownload.ClientID %>').style.display = "inline";
document.getElementById("downloadType").value = "Image";
}
var detailsPage = document.getElementById('<%# hdnAssetDetailsPage.ClientID %>').value;
loadWidgets(detailsPage + "?Type=Image&KeyID=" + FileID, ContentTitle, ContentDescription, FileID, "Image");
ViewTracker(FileID, "Image");
loadPopup();
}
function displayvideopopup(VideoURL, FileID, ContentTitle, ContentDescription, DownloadURL) {
debugger;
document.getElementById('<%# hdnFileID.ClientID %>').value = FileID;
document.getElementById('<%# hdnURL.ClientID %>').value = DownloadURL;
var embedTag = document.getElementById("embedURL");
var oParent = embedTag.parentNode;
oParent.removeChild(embedTag);
var oEmbed = oParent.appendChild(document.createElement('embed'));
oEmbed.src = VideoURL; /*Or next avi file in the list*/;
oEmbed.autoplay = "false";
oEmbed.id = "embedURL";
oEmbed.allowscriptaccess = "always";
oEmbed.allowfullscreen = "true";
oEmbed.width = "320";
oEmbed.height = "240";
document.getElementById("pBriefInfo").innerHTML = "<strong>" + ContentTitle + "</strong><br/>";
document.getElementById("pimageDisplay").style.display = "none";
document.getElementById("pvideoDisplay").style.display = "inline";
if (DownloadURL == null || DownloadURL == "") {
document.getElementById('<%# btnDownload.ClientID %>').style.display = "none";
}
else {
document.getElementById('<%# btnDownload.ClientID %>').style.display = "inline";
document.getElementById("downloadType").value = "Video";
}
var detailsPage = document.getElementById('<%# hdnAssetDetailsPage.ClientID %>').value;
loadWidgets(detailsPage + "?Type=Video&KeyID=" + FileID, ContentTitle, ContentDescription, FileID, "Video");
ViewTracker(FileID, "Video");
loadPopup();
}
function loadWidgets(url, title, description, FileID, AssetType) {
var widgetHTML = [];
var element = document.getElementById("ulWidgets");
widgetHTML.push('<li><a target="_blank" href="http://www.facebook.com/share.php?u=' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on facebook"><img src="/Assets/images/fb.gif" alt="facebook icon" /> Facebook</a></li>');
widgetHTML.push('<li><a target="_blank" href="http://twitter.com/home?status=Currently reading ' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on Twitter"><img src="/Assets/images/tweet.gif" alt="twitter icon" /> Twitter</a></li>');
widgetHTML.push('<li><a target="_blank" href="http://delicious.com/save?v=5&noui&jump=close&url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on delicious")"><img src="/Assets/images/del.gif" alt="delicious icon" /> Delicious</a></li>');
widgetHTML.push('<li><a target="_blank" href="http://digg.com/submit?phase=2&url=' + encodeURIComponent(url) + '/" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on digg"><img src="/Assets/images/tu.gif" alt="digg icon" /> Digg</a></li>');
widgetHTML.push('<li><a target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&t=' + encodeURIComponent(title) + '&c=<p><img src=' + encodeURIComponent(url) + '/></p>&u=' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on myspace"><img src="/Assets/images/myspace.gif" alt="MySpace icon" /> MySpace</a></li>');
element.innerHTML = widgetHTML.join('');
}
function SharingWidget(FileId, AssetType) {
var trackingUrl = "/Share/" + AssetType + "/" + FileId;
if (window.urchinTracker)
urchinTracker(trackingUrl);
}
function DownloadTracker() {
if (document.getElementById("downloadType").value != "") {
var trackingUrl = "/Downloads/" + document.getElementById("downloadType").value + "/" + document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnFileID').value;
if (window.urchinTracker)
urchinTracker(trackingUrl);
}
}
function ViewTracker(FileId, AssetType) {
var trackingUrl = "/View/" + AssetType + "/" + FileId;
if (window.urchinTracker)
urchinTracker(trackingUrl);
}
function downloadasset() {
debugger;
//DownloadTracker();
var dURL = "/Pages/FileDownload.aspx?file=" + document.getElementById('<%# hdnURL.ClientID %>').value;
//var dURL = document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnAssetDownloadPage').value + "?url=" + document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnURL').value;
window.open(dURL);
}
</script>