applying image on the border of message box created using javascript
-
Hi I have written one javascript function to create messagebox using div. The script is given below. function showBox(str) { debugger; var width = document.documentElement.clientWidth + document.documentElement.scrollLeft; var layer = document.createElement('div'); layer.style.zIndex = 2; layer.id = 'layer'; layer.style.position = 'absolute'; layer.style.top = '0px'; layer.style.left = '0px'; layer.style.height = document.documentElement.scrollHeight + 'px'; layer.style.width = width + 'px'; layer.style.backgroundColor = 'LightGray'; layer.style.opacity = '.7'; layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=80)"); document.body.appendChild(layer); var div = document.createElement('div'); div.style.zIndex = 3; div.id = 'box'; div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed'; //div.style.border==" " div.style.top = '200px'; div.style.left = (width / 2) - (400 / 2) + 'px'; div.style.height = '100px'; div.style.width = '400px'; div.style.backgroundColor = 'White'; div.style.border = '4px solid silver'; div.style.padding = '20px'; document.body.appendChild(div); var myimg = document.createElement('IMG'); myimg.src= "../images3.jpg"; myimg.width= '50'; myimg.height = '50'; myimg.visible="true"; div.appendChild(myimg); var p = document.createElement('p'); p.innerHTML = str; p.style.position = "absolute"; p.style.top = '20px'; p.style.fontSize=14+'px'; p.style.fontWeight = "bold"; p.style.left = (width / 2) - (800 / 2) + 'px'; div.appendChild(p); var btn=document.createElement('Button'); btn.innerHTML='Ok'; btn.style.border='2px solid silver'; btn.style.opacity = '.6'; btn.style.fontSize=16+'px'; btn.style.fontWeight = "bold"; btn.style.border='solid'; btn.style.position = "absolute"; btn.style.top = '100px'; btn.style.left = (width / 2) - (620 / 2) + 'px'; btn.onclick = function() { document.body.removeChild(document.getElementById('layer')); document.body.removeChild(document.getElementById('box')); }; div.appendChild(btn); } I dont have any problem in this script. The only problem i have is , I am unable to apply image of round corner to the border of that message box. Does anybody has solution for my problem. How ca
-
Hi I have written one javascript function to create messagebox using div. The script is given below. function showBox(str) { debugger; var width = document.documentElement.clientWidth + document.documentElement.scrollLeft; var layer = document.createElement('div'); layer.style.zIndex = 2; layer.id = 'layer'; layer.style.position = 'absolute'; layer.style.top = '0px'; layer.style.left = '0px'; layer.style.height = document.documentElement.scrollHeight + 'px'; layer.style.width = width + 'px'; layer.style.backgroundColor = 'LightGray'; layer.style.opacity = '.7'; layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=80)"); document.body.appendChild(layer); var div = document.createElement('div'); div.style.zIndex = 3; div.id = 'box'; div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed'; //div.style.border==" " div.style.top = '200px'; div.style.left = (width / 2) - (400 / 2) + 'px'; div.style.height = '100px'; div.style.width = '400px'; div.style.backgroundColor = 'White'; div.style.border = '4px solid silver'; div.style.padding = '20px'; document.body.appendChild(div); var myimg = document.createElement('IMG'); myimg.src= "../images3.jpg"; myimg.width= '50'; myimg.height = '50'; myimg.visible="true"; div.appendChild(myimg); var p = document.createElement('p'); p.innerHTML = str; p.style.position = "absolute"; p.style.top = '20px'; p.style.fontSize=14+'px'; p.style.fontWeight = "bold"; p.style.left = (width / 2) - (800 / 2) + 'px'; div.appendChild(p); var btn=document.createElement('Button'); btn.innerHTML='Ok'; btn.style.border='2px solid silver'; btn.style.opacity = '.6'; btn.style.fontSize=16+'px'; btn.style.fontWeight = "bold"; btn.style.border='solid'; btn.style.position = "absolute"; btn.style.top = '100px'; btn.style.left = (width / 2) - (620 / 2) + 'px'; btn.onclick = function() { document.body.removeChild(document.getElementById('layer')); document.body.removeChild(document.getElementById('box')); }; div.appendChild(btn); } I dont have any problem in this script. The only problem i have is , I am unable to apply image of round corner to the border of that message box. Does anybody has solution for my problem. How ca
The obvious issue is, for you to have a rounded corner, the bit that's meant to be rounded off, needs to look the same as the form underneath. Unless you're able to use PNGs and the browser respects their transparency, I don't see how this could work.
Christian Graus Driven to the arms of OSX by Vista. "I am new to programming world. I have been learning c# for about past four weeks. I am quite acquainted with the fundamentals of c#. Now I have to work on a project which converts given flat files to XML using the XML serialization method" - SK64 ( but the forums have stuff like this posted every day )
-
Hi I have written one javascript function to create messagebox using div. The script is given below. function showBox(str) { debugger; var width = document.documentElement.clientWidth + document.documentElement.scrollLeft; var layer = document.createElement('div'); layer.style.zIndex = 2; layer.id = 'layer'; layer.style.position = 'absolute'; layer.style.top = '0px'; layer.style.left = '0px'; layer.style.height = document.documentElement.scrollHeight + 'px'; layer.style.width = width + 'px'; layer.style.backgroundColor = 'LightGray'; layer.style.opacity = '.7'; layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=80)"); document.body.appendChild(layer); var div = document.createElement('div'); div.style.zIndex = 3; div.id = 'box'; div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed'; //div.style.border==" " div.style.top = '200px'; div.style.left = (width / 2) - (400 / 2) + 'px'; div.style.height = '100px'; div.style.width = '400px'; div.style.backgroundColor = 'White'; div.style.border = '4px solid silver'; div.style.padding = '20px'; document.body.appendChild(div); var myimg = document.createElement('IMG'); myimg.src= "../images3.jpg"; myimg.width= '50'; myimg.height = '50'; myimg.visible="true"; div.appendChild(myimg); var p = document.createElement('p'); p.innerHTML = str; p.style.position = "absolute"; p.style.top = '20px'; p.style.fontSize=14+'px'; p.style.fontWeight = "bold"; p.style.left = (width / 2) - (800 / 2) + 'px'; div.appendChild(p); var btn=document.createElement('Button'); btn.innerHTML='Ok'; btn.style.border='2px solid silver'; btn.style.opacity = '.6'; btn.style.fontSize=16+'px'; btn.style.fontWeight = "bold"; btn.style.border='solid'; btn.style.position = "absolute"; btn.style.top = '100px'; btn.style.left = (width / 2) - (620 / 2) + 'px'; btn.onclick = function() { document.body.removeChild(document.getElementById('layer')); document.body.removeChild(document.getElementById('box')); }; div.appendChild(btn); } I dont have any problem in this script. The only problem i have is , I am unable to apply image of round corner to the border of that message box. Does anybody has solution for my problem. How ca