Close buttonu 2nd click does not work
<!doctype html>
<html lang="en">
<head>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="designmode.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var name = $("#name");
var content = $("#content");
var textbox = $("@[id='name']");
var textarea = $("@[id='content']");
$('#alert').hide();
$("#add").click(function(){
$("#dialog").dialog('open');
}).hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
).mousedown(function(){
$(this).addClass("ui-state-active");
})
.mouseup(function(){
$(this).removeClass("ui-state-active");
});
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
modal: false,
resizable: false,
widht:100,
buttons: {
add:function(){
textbox.val(name.val());
textarea.append(content.val());
},//ok
Cancel:function(){
$("#alert").dialog({
bgiframe:true,
modal:true,
resizable: false,
height:150,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons:{
Yes:function(){
$("#alert").dialog('close');
$("#dialog").dialog('close');
},
No:function(){
$("#alert").dialog('close');
}
}
});
}//cancel
}//button
});
});
</script>
</head>
<body>
<div class="demo">
<div id="dialog" title="Jquery Test">
<form>
<fieldset class="text ui-widget-content ui-corner-all">
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><p>
<textarea id="content" class="text ui-widget-content ui-corner-all"></textarea></p>
</fieldset>
</form>
</div>
<div id="alert" class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong> Do you want to cancel ?</strong></p>
</div>
<div class="ui-widget" style="padding:20px;">
<form>
<p><input value="text input" id="name" class="text ui-widget-content ui-corner-all"/></p>
<p><textarea id="content" class="text ui-widget-content ui-corner-all" ></textarea></p>
</form>
<input type="button" id="add" class="ui-button ui-state-default ui-corner-all" value="add"/>
</div>
</div>
</body>
</html>
Please reopen with a more specific description. Also please check this article to make sure you are using the dialog correctly: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/