Skip to content
Browse files

Dialog: Visual test page for animated modal dialog

  • Loading branch information
jzaefferer committed Oct 26, 2012
1 parent 666014e commit 8251440d78c68f41bfdc7324874f50909b6571a9
Showing with 53 additions and 0 deletions.
  1. +53 −0 tests/visual/dialog/animated.html
@@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.8.2.js"></script>
<script src="../../../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.mouse.js"></script>
<script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script>
<script src="../../../ui/jquery.ui.effect.js"></script>
<script src="../../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../../ui/jquery.ui.effect-explode.js"></script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
hide: {
effect: "explode",
duration: 1000
modal: true

$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );

<p>WHAT: A animated modal dialog, using blind effect to show, explode to hide.</p>
<p>EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.</p>

<div id="dialog" title="Are you sure?">
<p>Please enter password to continue.</p>
<label for="password">Password</label><input id="password">

<button id="opener">Open Dialog</button>


0 comments on commit 8251440

Please sign in to comment.
You can’t perform that action at this time.