Good morning gang,
I'm attempting to use Modal Confirmation from
http://jqueryui.com/demos/dialog/#modal-confirmation
I have the example working and code looks like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link type="text/css"
href="../../lib/themes/base/jquery.ui.all.css"
rel="stylesheet" />
<script type="text/javascript"
src="../../lib/jquery-1.4.2.js"></script>
<script type="text/javascript"
src="../../lib/external/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.core.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.widget.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.button.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.position.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.dialog.js"></script>
<link type="text/css" href="../../lib/demos/demos.css"
rel="stylesheet" />
<script type="text/javascript">
$("#dialog-confirm").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
'Delete all items': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
</script>
</head>
<body>
<a href="#" id="showpopupbox">Click to show pupup</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0
7px 20px 0;"></span>These items will be permanently deleted and cannot
be recovered. Are you sure?</p>
</div>
</body>
</html>
-----------------------------------
As you can see I'm I have a href in place trying to apply a click
event to $('#showpopupbox') but with now success.
How would I go about doing this? I want to use this in my form
validation which i'm using jquery :).
Any help is greatly appreciated. Thanks!
Ron
