Jquery Dialog Beforeclose Example - Jquery
How to confirm beforeclose dialog in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
The example jquery code allows you to prevent the dialog box from false closing. The check box should be checked before closing the dialog box.
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$( "#dialog" ).dialog({
autoOpen: false,
buttons: {
OK: function() {
$( this ).dialog( "close" );
}
},
beforeClose: function( event, ui ) {
if ( !$( "#terms" ).prop( "checked" ) ) {
event.preventDefault();
$( "[for=terms]" ).addClass( "invalid" );
}
},
width: 500
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<div id="dialog">
<p>Welcome to Hscripts.com!!</p>
<div>
<label for="terms">Are you sure want to close?</label>
<input type="checkbox" id="terms">
</div>
</div>
<input type='button' value='Open Dialog' id="opener">
