In this example, we'll have a dialog box displayed in the center of the browser window and apply the puff effect to it when either the OK or Cancel buttons are clicked.
In the
<body>element of our template file, add the following elements for the dialog:<div id="confirm"> <img src="img/help.png" alt="Help Icon"> <p>Are you sure you want to do that?</p> <button>Ok</button><button>Cancel</button> </div>
Add the accompanying script to the empty function as follows:
$("#confirm").css({ left: $(window).width() / 2 - $("#confirm").width() / 2, top: $(window).height() / 2 - $("#confirm").height() / 2 }); $("#confirm, button").click(function() { $("#confirm").effect("puff"); });Save this page as
puff.html. Add the following styles for the dialog box to a new file in your text editor:#confirm { display:block; width:400px; height:120px; position:absolute; border...