mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>jQuery UI Dialog Static Markup Test Page</title>
|
||
|
|
<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css" />
|
||
|
|
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||
|
|
<script type="text/javascript" src="static_helpers.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
|
||
|
|
//overlay sample plugin ( to become part of positionTo )
|
||
|
|
$.fn.overlay = function(){
|
||
|
|
var that = this;
|
||
|
|
//overlay widget markup
|
||
|
|
var overlay = $('<div class="ui-overlay">'+
|
||
|
|
'<iframe class="ui-helper-zfix" src="#" frameborder="0"></iframe>'+
|
||
|
|
'<div class="ui-widget-overlay"></div>'+
|
||
|
|
'<div class="ui-widget-shadow ui-corner-all"></div>'+
|
||
|
|
'</div>');
|
||
|
|
//ui-widget-shadow gets set to exact widget dims and offset (TL). Shadow appearance/thickness is handled in ui.theme.css through margins and padding
|
||
|
|
overlay.find('.ui-widget-shadow')
|
||
|
|
.width( $(that)[0].offsetWidth )
|
||
|
|
.height( $(that)[0].offsetHeight )
|
||
|
|
.css({
|
||
|
|
position: 'absolute',
|
||
|
|
left: $(that)[0].offsetLeft,
|
||
|
|
top: $(that)[0].offsetTop
|
||
|
|
});
|
||
|
|
$(that).before(overlay);
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
|
||
|
|
//call overlay
|
||
|
|
$(function(){
|
||
|
|
$('.ui-dialog').overlay();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body style="font-size: 62.5%;">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ui-dialog -->
|
||
|
|
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="position: absolute; left: 300px; top: 200px; width: 300px; ">
|
||
|
|
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
|
||
|
|
<span class="ui-dialog-title">This is my title</span>
|
||
|
|
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
|
||
|
|
</div>
|
||
|
|
<div class="ui-dialog-content ui-widget-content" style="height: 13em;">
|
||
|
|
<p>I'm in a dialog!</p>
|
||
|
|
</div>
|
||
|
|
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
|
||
|
|
<button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
|
||
|
|
<button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
|
||
|
|
<button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
|
||
|
|
</div>
|
||
|
|
<div class="ui-resizable-n ui-resizable-handle"></div>
|
||
|
|
<div class="ui-resizable-s ui-resizable-handle"></div>
|
||
|
|
<div class="ui-resizable-e ui-resizable-handle"></div>
|
||
|
|
<div class="ui-resizable-w ui-resizable-handle"></div>
|
||
|
|
<div class="ui-resizable-ne ui-resizable-handle"></div>
|
||
|
|
<div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
|
||
|
|
<div class="ui-resizable-sw ui-resizable-handle"></div>
|
||
|
|
<div class="ui-resizable-nw ui-resizable-handle"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|