Итак, у меня есть лайтбокс, который динамически загружается из файла common.js.(Устаревший код, который я использую)
У меня есть эта функция в файле common.js
//dynamically load a light box to he page
// @src - is the URL to load in the lightbox
// @hidePDFLink - is a boolean value indicating if PDF link should be hidden
// @imagePath - is the image path for the pdf link
function loadLightBox(src, options) {
options = $.extend({ pdfSrc: null, width: Math.min(820, $(window).width() - 20), height: $(window).height() * 0.90, title: null }, options);
//LOAD IT
if ($("#lightBox").length == 0) {//create light box if it doesn't exist
$("body", $(document)).append($('<div id="lightBoxOverlay" /><div id="lightBox"><div id="lightBoxToolbar"><div id="lightBoxTitle" /><div id="lightBoxCloseLink" title="Close" /><div id="lightBoxPrintPDFLink" title="Create PDF">Create PDF</div></div><iframe id="lightBoxFrame" scrolling="auto" frameborder="0" onload="showWaitCursor(false)" /><div id="lightBoxContent" /></div>'));
$('#lightBox')[0].hideFunction = (options.removeOnClose == true) ?
function () {
$(document).unbind("keyup", $('#lightBox')[0].escapeFunction);
$('#lightBox, #lightBoxOverlay').empty().remove();
showWaitCursor(false);
return false;
} :
function () {
$("#lightBox").hide();
$("#lightBoxOverlay").hide();
$("IFRAME", "#lightBox").attr("src", "about:blank");
$('#lightBoxContent').html('');
$(document).unbind("keyup", $('#lightBox')[0].escapeFunction);
showWaitCursor(false);
return false;
}
$('#lightBox')[0].escapeFunction = function (event) {
if (event.keyCode == 27)
$('#lightBox')[0].hideFunction();
}
$("#lightBoxCloseLink").click($('#lightBox')[0].hideFunction);
$("#lightBoxPrintPDFLink").click(function () {
window.document.location = $(this).attr('pdfSrc');
return false;
});
// apply bgiframe if available
if ($.fn.bgiframe)
$('#lightBox').bgiframe();
}
setLightBoxOptions(options);
//set source
if (!(options.srcContent)) {
showWaitCursor(true);
$("#lightBoxFrame").attr("src", src);
}
}
function setLightBoxOptions(options) {
if (options.pdfSrc)
$("#lightBoxPrintPDFLink").attr('pdfSrc', options.pdfSrc).show();
else
$("#lightBoxPrintPDFLink").hide();
if (options.title)
$("#lightBoxTitle").text(options.title);
if (options.width) {
$("#lightBoxFrame, #lightBoxContent").width(options.width - 20);
$('#lightBoxToolbar', $('#lightBox')).width(options.width);
}
if (options.height)
$("#lightBoxFrame, #lightBoxContent").height(options.height - $('#lightBoxToolbar', $('#lightBox')).height());
if (options.srcContent) {
$('#lightBoxContent').html(options.srcContent);
if (!(options.width)) $('#lightBox').width($('#lightBoxContent').width());
}
//set position of lightbox
var isIE6 = false;
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
if (ieversion >= 6 && ieversion < 7)
isIE6 = true;
}
$("#lightBox").css({
left: $(window).width() / 2 - $("#lightBox").width() / 2 + (isIE6 ? $(window).scrollLeft() : 0), // account for scrolling
top: $(window).height() / 2 - $('#lightBox').height() / 2 + (isIE6 ? $(window).scrollTop() : 0)// account for scrolling
});
}
common.css:
/*** BEGIN STYLES FOR LIGHTBOX ***/
#lightBoxOverlay
{
position:fixed;
left:0px;
top:0px;
width: 100%;
height: 100%;
display:none;
opacity: 0.5;
filter: alpha(opacity=50);
background-color:#666;
z-index:2998;
}
#lightBox
{
display:none;
position:fixed;
top: 5%;
border:solid 1px black;
background-color:#fff;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
z-index:2999;
}
#lightBox iframe
{
/*width: 800px;*/
margin: 0 10px 10px 10px;
}
#lightBox #lightBoxToolbar
{
margin-top:10px;
/*width: 820px;*/
height: 26px;
}
#lightBox #lightBoxPrintPDFLink
{
float: right;
background: url(images/icon_pdf.gif) no-repeat right;
cursor:pointer;
margin-right:5px;
width: 90px;
height: 16px;
white-space:nowrap;
}
#lightBox #lightBoxCloseLink
{
float: right;
background: url(images/icon_x2.gif) no-repeat center;
cursor:pointer;
margin-right:10px;
width: 16px;
height: 16px;
}
#lightBox #lightBoxTitle
{
float: left;
margin-left:10px;
height: 16px;
font-weight:bold;
}
/*** END STYLES FOR LIGHTBOX ***/
, и эта функция вызывает вышеуказанную функцию:
var url = 'aUrl/SomeControl.ascx';
loadLightBox(url, { width: 640, height: 575, title:'TestTitle' });
Это приводит к загрузке светового окна ниже: ![enter image description here](https://i.stack.imgur.com/BGVjp.png)
Моя проблема в том, что я могу 't установить / изменить заголовок лайтбокса в документе готово.В приведенном ниже коде функция Document Ready находится в элементе управления, который загружается в лайтбокс.
-Первое предупреждение возвращается с нулевым значением, а второе возвращается с нулевым значением.
alert(document.getElementById('lightBoxTitle'));
alert($('#lightBoxTitle').text());
$('#lightBoxTitle').text('IM A NEW TITLE THAT SHOULD BE SET');
Я использовал инструменты разработчика Chrome и убедился, что готовый документ запущен в common.js изатем готовый документ запускается в элементе управления, который загружается в лайтбокс.
Я знаю, что могу извлечь заголовок и передать его в качестве параметра в функцию loadLightbox, но я пытаюсь предотвратить дополнительную загрузку, и я хотел бы стилизовать его не так, как выглядит сейчас.
Спасибо