I know how to work with jQuery dialog, like below
JQuery snippet
$("#PMinfo").dialog({
autoOpen: true,
height: 250,
width: 600,
modal: false,
draggable: false,
resizable: false,
close: function() {
var $this = $(this);
$this
.dialog("widget")
.effect("transfer", {
to: "#smpb_info_btn",
className: "ui-effects-transfer"
}, 500, function() {
$this.remove();
});
}}
But I want to achieve the transfer effect like Dojo dialog. Here I am giving the link of page where user can go and see what kind of effect I want to achieve this effect with jquery dialog open and close. So please go to the link page and just click on view example button and see how the dialog appears with effect.
So I want that when user click on my button then dialog should open like Dojo with transfer effect and when close dialog then dialog should zoom out to button. Please guide me with code snippet that shows how I could get the same effect with jQuery dialog open and close.
THE code i copy which is not working
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryDialogWithTransferEffect.aspx.cs" Inherits="JQueryDialogWithTransferEffect" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"type="text/javascript"></script>
<style type="text/css">
.ui-effects-transfer
{
border: 2px dotted grey;
}
</style>
<script type="text/javascript">
jQuery(function ($) {
// Set up the dialog, don't show it yet
// Note the effects, they tie up with the
// transfer effect we do later.
$("#dialog").dialog({
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 500
},
autoOpen: false
});
// Hook up the button to toggle showing/hiding
// the dialog
$("#btnToggle").click(function () {
var dlg = $("#dialog");
alert("pp");
// Show or hide?
if (dlg.is(":visible")) {
// Hide: Kick off the transfer effect and close the
// dialog. The transfer will run simultaneously
// with the fade we configured above
dlg.effect("transfer", {
to: "#btnToggle",
className: "ui-effects-transfer",
duration: 500
}).dialog("close");
}
else {
// Show: Show the dialog, then kick off a transfer
// effect transferring the button to the dialog's
// widget. Again the transfer and fade run simultaneously
// and so work together.
dlg.dialog("open");
$(this).effect("transfer", {
to: dlg.dialog("widget"),
className: "ui-effects-transfer"
}, 500);
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnToggle" value="Toggle Dialog"/>
<div id="dialog" title="Basic dialog" style="display: none">
<p>This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</form>
</body>
</html>
please just copy my code and run it in aspx file and see the result. please help me to get the error….what is wrong in my code. thanks
You can specify effects the dialog should use when appearing/disappearing in the dialog options:
Live example using the “slide” effect
jQuery UI has a lot of effects available, you can find demos of them on this examples page. One of them is bound to be roughly what you’re looking for.
Update: The “transfer” effect, specifically, is a pain. 🙂 I finally got it mostly working, you’ll want to tweak the durations and easings to tie up the parallel effects better:
HTML:
CSS:
JavaScript:
Live example
For more on easings (which would help tie up the effects better), see the easings showcase.