jquery-ui/tests/visual/dialog/animated.html
Jörn Zaefferer b698f809de Tests: Use demo bootstrap for visual tests
Adds a data-composite option and fixes paths for effects. Otherwise
just applies the same conversion as already applied to demos, sometimes
moving a <style> element to the right place.
2015-09-30 17:55:20 +02:00

41 lines
1.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect-blind effect-explode">
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
modal: true
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</head>
<body>
<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">
</div>
<button id="opener">Open Dialog</button>
</body>
</html>