Floating div instead of alert boxes

[cbiti]

I'm intersted in using floating div's to display warning messages instead of JS alert(). Are there any disadvantages to doing that? Also, do you know of any tutorials on this? Thanks.

[toasti]

Not sure of any tutorials, but dojo (and im sure most ajax libraries) can do it for you:

http://www.dojotoolkit.org/ -> see it in action -> layout widgets -> dialog

If you download the toolkit you will get the code. It looks something like this:

javascript:

<script type="text/javascript"> djConfig = { isDebug: true }; </script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.Dialog");
</script>

<script type="text/javascript">
var dlg;
function init(e) {
	dlg = dojo.widget.byId("DialogContent");
	var btn = document.getElementById("hider");
	dlg.setCloseControl(btn);
}
dojo.addOnLoad(init);

</script>

css:

<style type="text/css">
body { font-family : sans-serif; }
.dojoDialog {
	background : #eee;
	border : 1px solid #999;
	-moz-border-radius : 5px;
	padding : 4px;
}

form {
	margin-bottom : 0;
}
</style>

inline javascript (link to show dialog):

<a href="javascript:dlg.show()">Show</a>

Your dialog (they have a little for you can full in)

<div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250">
	<form onsubmit="return false;">
		<table>
			<tr>
				<td>Name:</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>Location:</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>Description:</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>Location:</td>
				<td><input type="file"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" id="hider" value="OK"></td>
			</tr>
		</table>
	</form>
</div>

..the nice thing about using floating divs instead of JS alert is that you can do so much more with it because it is just HTML.

i can imagine that you may be in danger of not re-enabling stuff after you have disabled it for the dialog. Or maybe not hiding your dialog properly or something...Thats why i like to use a library like dojo. apart from the fact that it makes life a lot easier, i can relax a bit, because i am sure their javascript is much better than mine!

hope that helps.