10 replies to this topic

[tarek.mostafa]

Dear all,

How to display an alert message with a scroll bar attached?!!.

If this is not applicable, then how to display a popup message with a scroll bar, which acts completely as an alert message in its behaviour, meaning that the user can not act on the page except when he confirms the alert?!!

Thanks in advance

[WingedPanther]

Why does it need a scrollbar?

You will probably need to create a <div> element that hovers in front of the rest of the content.

[BlaineSch]

You can't make an "alert" but you can kinda make your own, like WP said, make a div, add some properties like height and width set the "scroll:auto" in there. Position it in the middle of the screen and black everything else out.

[tarek.mostafa]

I need a scrollbar, because i concatenate some strings in my alert message and sometimes the alert doesnot display the whole message.

It seems that to create my own is the only solution available. But how can i black everything else?!

Thank u both for your help, i really appreciate it.

[amrosama]

var overlay=document.createElement('div');

overlay.setAttribute('style',"background-color:black;display:block;vertical-align:middle;position:absolute;top:0px;left:0px;background-color: black;opacity:1;height:"+ window.innerHeight +"px;width:"+window.innerWidth + "px;");

overlay.appendChild(document.createTextNode('replace this element with your alert box/div'));

document.body.appendChild(overlay);

this can help you but im not sure if it will work in ie. but its working in opera and firefox
replace the textnode in "overlay.appendChild(document.createTextNode('replace this element with your alert box/div'));" with your alert div.
sorry for the crappy code i had to rewrite it from my mootools class, if you have mootools 1.2 core loaded in your pages i can post the JS class for it

[BlaineSch]

Does opacity work in the browsers amr? I thought that only worked in some versions of IE?

If not, try making a PNG image with partical transparency, that isn't totally supported by less than IE6, but it looks cool and that's how facebook does it.

[amrosama]

yeah opacity works fine on all browsers
i checked opacity with firefox 3+ opera 9+ and even ie7

[BlaineSch]

Does IE6? Even if probably wont matter lol that's the one that does not support PNG transparency, so it's matched up so far and if it can do that it's better. Also because it's CSS compared to an image it's less loading time too. So it wins :D

[amrosama]

yeah pngs in ie6 made me hate my life.

[tarek.mostafa]

hey amrosama,

I will try this out and let you know.

Thanks for your help, i really appreciate it

[amrosama]

you are welcome :D
hope it works