lnakuma
New Member
- Messages
- 15
- Reaction score
- 0
- Points
- 0
Im fairly new to javascript.
I am trying to write a function that would create a div element inside the html without much of success.
here is my javascript function
css style poplayer and poplayerContent are in the mass css script file.
openModalWindow is a function that I know it works because I've used this function in other page.
and lastly, $('modalBackgroundDiv') is a div pre-defined in html
I used a <a href onclick> to call deleteBlogEntryLayer function, only the pre-defined div layer modalBackgroundDiv poped up, and the div I created in javascript did not show at all.
Can someone point out what was wrong?
thx
I am trying to write a function that would create a div element inside the html without much of success.
here is my javascript function
Code:
function deleteBlogEntryLayer ( value, url ) {
var msg;
var msgcontent;
if ( !document.getElementById('confirmDeleteBlog') ) {
msg = document.createElement('div');
msg.id = 'confirmDeleteBlog';
msgcontent = document.createElement('div');
msgcontent.id = 'confirmDeleteBlogContent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.className = "popLayer";
msgcontent.className = "popLayerContent";
} else {
msg = document.getElementById('confirmDeleteBlog');
msgcontent = document.getElementById('confirmDeleteBlogContent');
}
msgcontent.innerHTML = "<h1>Are you sure you want to delete this blog?</h1><br /><a href = \"javascript:void(0);\" onclick = \"deleteBlogEntry('"+ value +"')\" style = \"margin-right: 30px; font-size: 14px; color: #0000ff;\">Yes</a><a href = \"javascript:void(0);\" onclick = \"closeModalWindow('comfirmDeleteBlog');\" style = \"font-size: 14px; color: #0000ff;\">No</a>";
openModalWindow('confirmDeleteBlog');
msg.style.display = 'block';
msg.focus();
}openModalWindow is a function that I know it works because I've used this function in other page.
Code:
function openModalWindow(value) {
var div = $(value);
var bgDiv = $('modalBackgroundDiv');
var docDim = Element.getDimensions(document.body);
//get the size of the window and calculate where the box should be placed
var wDim = getBrowserWindowSize();
var dDim = Element.getDimensions(div);
// locate position of center window
div.style.top = ((wDim.height - dDim.height*2) / 2) + 'px';
div.style.left = ((wDim.width - dDim.width) / 2) + 'px';
// set up background div, cover whole page instead of just the browser screen
if (docDim.height > wDim.height) {
wDim.height = docDim.height;
}
bgDiv.style.width = wDim.width + 'px';
bgDiv.style.height = wDim.height + 'px';
Element.show(div);
Element.show(bgDiv);
}
function closeModalWindow(value) {
Element.hide(value);
Element.hide('modalBackgroundDiv');
}
function getBrowserWindowSize() {
var winW = 630, winH = 460;
// brower compatibility
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
var rval = {
width: winW,
height: winH
};
return rval;
}
Code:
<div id = "modalBackgroundDiv" class = "modalPopupTransparent" style = "display: none;"></div>Can someone point out what was wrong?
thx
Last edited:
