<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false //case 1
,show: {effect: "blind",duration: 100} //case 2
,hide: {effect: "explode",duration: 100 } //cas2
,resizable: false //Modal Confirmation
,height:140 //Modal Confirmation
,modal: true //Modal Confirmation
,buttons: {"Delete all items": function() {$( this ).dialog( "close" );}
,Cancel: function() {$( this ).dialog( "close" );}
} //Modal Confirmation
,modal: true //Modal Message
,buttons: {Ok: function() {$( this ).dialog( "close" );}} //Modal Message
,autoOpen: false //Modal Input
,height: 300 //Modal Input
,width: 350 //Modal Input
,modal: true //Modal Input
,buttons: {"Create an account": addUser,Cancel: function() {dialog.dialog( "close" );}} //Modal Input
,close: function() {form[ 0 ].reset();allFields.removeClass( "ui-state-error" );} //Modal Input
$( "#opener" ).click(function() {$( "#dialog" ).dialog( "open" );});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
/*************************/
function xxfnOpenNormalDialog() {
if (hadEdit==1){
$("#dialog-confirm").html("Are you sure ?");
$("#dialog-confirm").dialog({
modal: true,
minHeight: 200,
minWidth: 300,
dialogClass: "no-close",
center: true,
my: "center",
at: "center",
of: window,
autoOpen:true,
resizable: false,
modal: true,
title: "Exit",
dialogClass: 'dlgfixed',
position: ['center','middle'],
buttons: {
"Yes": function () {
$(this).dialog('close');
callback(true);
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
}).css("font-size", "15px") ;
}else{
parent.exitMoralBox();
}
}
/*****************************************/
function confirmExit(callback){
result=0;
$("#dialog-confirm").dialog({
modal: true,
minHeight: 200,
minWidth: 300,
dialogClass: "no-close",
center: true,
my: "center",
at: "center",
of: window,
autoOpen:true,
resizable: false,
modal: true,
title: "Exit Confirm",
dialogClass: 'dlgfixed',
position: ['center','middle'],
buttons: {
"Yes": function () {$(this).dialog('close');result=1; callback(true);},
"No": function () {$(this).dialog('close');result=0;callback(false);}
}
,open: function() {$(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close").css("display", "none");}
}) ;
}
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
沒有留言:
張貼留言